Телеграмм чат группы javascript

Size: a a a

JavaScript.Ninja

2021 November 14

Я часто виду как люди пишут в реакте так:

[value, setValue] = useState(0);
value + 1;

это ведь плохая практика, и правильно писать так setValue(prev => prev + 1)?

источник

23:45пожаловаться #1

Michael in JavaScript.Ninja

Value + 1 просто-напросто не вызовет перерендер

источник

23:48пожаловаться #2

Kirill Romanov in JavaScript.Ninja

value + 1 вообще ничего не сделает

источник

23:49пожаловаться #3

Kirill Romanov in JavaScript.Ninja

Если это никуда не присвоено

источник

23:50пожаловаться #4

Kirill Romanov in JavaScript.Ninja

У тебя точно пример корректный?

источник

23:50пожаловаться #5

belen in JavaScript.Ninja

возможно там setValue(value +1 ) ?

источник

23:51пожаловаться #6

Vladislav Slyusar in JavaScript.Ninja

дада

источник

23:51пожаловаться #7

Vladislav Slyusar in JavaScript.Ninja

Алексей правильно поправил, пишут setValue(value + 1), вместо setValue(prev => prev + 1)

источник

23:53пожаловаться #8

Michael in JavaScript.Ninja

Ну функция асинхронная и поэтому value может быть не тем, что вы ожидаете. Передавая функцию - точно знаете

источник

23:54пожаловаться #9

belen in JavaScript.Ninja

тут ты имеешь актуальное значение наверняка.
и новый стейт на его основе считаешь

источник

23:55пожаловаться #10

2021 November 15

АК

Азад Кичибеков... in JavaScript.Ninja

Не плохая, функции нужно писать там где есть смысл, это всеравно что оборачиваеть все компоненты в memo

источник

00:00пожаловаться #11

Vladislav Slyusar in JavaScript.Ninja

но value ведь не всегда будет актуальнам значением, если написать setValue(value + 1) ?

источник

00:01пожаловаться #12

АК

Азад Кичибеков... in JavaScript.Ninja

Если перед этим не был вызван повторно setValue то всегда

источник

00:01пожаловаться #13

Vladislav Slyusar in JavaScript.Ninja

https://ru.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их текущее значение для вычисления следующего состояния.

Например, следующий код может не обновить счётчик:

// Неправильно
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Правильно
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

В данном коде:

[value, setValue] = useState(0);
setValue(value + props.increment);

value будет всегда актуальным значением?

Или же нужно писать так:

[value, setValue] = useState(0);
setValue((prevValue) => prevValue + props.increment);

ru.reactjs.org

Состояние и жизненный цикл – React

JavaScript-библиотека для создания пользовательских интерфейсов

источник

00:25пожаловаться #14

Igor Ryazantsev in JavaScript.Ninja

Спасибо ☺️

источник

02:41пожаловаться #15

АЗ

Андрей Звёздочка... in JavaScript.Ninja

Второе

источник

03:33пожаловаться #16

Сергей in JavaScript.Ninja

Привет, подскажите что значит значение этого свойства basepath: '@file' (Нашел в галпфайле)

источник

07:02пожаловаться #17

New saver in JavaScript.Ninja

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="number" id="num1"/>
<input type="number" id="num2"/>
<button onclick="alertf()">Add</button>
<script>
function alertf(){
var a=document.getElementById("num1").value;
var b=document.getElementById("num2").value;
var c=Number(a)+Number(b);

var table = document.getElementById("priceTable");

var i = 1;
var sum = 0;
while (i < c) {
sum += parseFloat(table.rows[i].cells[2].innerHTML)
i++;
}

var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell2.innerHTML = "Total Price";
cell3.innerHTML = sum;

}

<table id="priceTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Price</th>
</tr>
<tr>
<td>1</td>
<td>Shirts</td>
<td>49.99</td>
</tr>
<tr>
<td>2</td>
<td>Pants</td>
<td>55.50</td>
</tr>
<tr>
<td>3</td>
<td>Socks</td>
<td>20</td>
</tr>
<tr>
<td>4</td>
<td>Shoes</td>
<td>99</td>
</tr>
<tr>
<td>5</td>
<td>Jackets</td>
<td>88.90</td>
</tr>
</table>

</script>
</body>
</html>
хотела чтобы 2 значений ввела и он такого размера таблицу сделал

источник

07:55пожаловаться #18

CodeAsm in JavaScript.Ninja

Я использую React фреймворк Next.js
Мне необходимо заменить тэг img на <Image> Component (next-image) https://nextjs.org/docs/api-reference/next/image
JSX:


<ThumbContainer>
      <Thumbnail
            alt={title}
            onError={handleImgError}
            ref={placeholderRef}
            src={thumbnails?.url}
       />
</ThumbContainer>

Style (styled components):


const ThumbContainer = styled.div`
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
`;

const Thumbnail = styled.img.attrs(() => ({ className: "thumbnail" }))`
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  background-image: url("/images/catalog/video-placeholder.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  transition: transform 0.7s ease;
  object-fit: cover;
`;

Как это сделать? Любые советы. 🙂

источник

08:08пожаловаться #19

ГГ

Гензель Гретель... in JavaScript.Ninja

всем привет. подскажите как правильно вызвать элемент если у меня есть две формы с одинаковым id. в нем абсолютно одинаковые input. только с той разницей что одна форма на мобильных устройствах срабатывает а другая на десктопах. получается так что я получаю обе формы через querySelectorALL. но чтобы мне потом получить значение из формы у меня не получается. у меня есть условие что если экран меньше то значит mapForm = document.querySelectorAll('#mapFOrm')[1]
но когда срабатывает фетч в котором лежит data append ('phone', documeny.queryselectorAll('#mapFOrm input')[1]) я получаю значение первой формы а не второй. как тут лучше поступить?

источник

09:26пожаловаться #20