Массив состояний ReactJS вызывает проблемы

#reactjs #react-hooks

Вопрос:

У меня есть массив в состоянии реакции. Я помещаю в него значения таким образом, который, как я предполагал, был правильным, но массив всегда пуст, когда я пытаюсь его зарегистрировать. Как насчет того, что мой метод нажатия на массив неверен?

 const [betHistory, setBetHistory] = useState([""]);

Внутри моей функции (которая, как я проверил, вызывается, и счет ставок никогда не бывает пустым)

 function placeBet() {  console.log(betCount);  setBetHistory(betHistory =gt; [...betHistory, betCount.toString()]);  console.log(betHistory); }

Журнал всегда пуст.

1. betHistory следует обновлять при следующем рендеринге, а не сразу там, где у вас есть журнал. Попробуйте войти betHistory в систему в верхней части функции визуализации.

2. Кстати , у вас есть две переменные в области видимости, называемые betHistory , например. параметр может быть переименован setBetHistory(oldBetHistory =gt; [...oldBetHistory, betCount.toString()]); . Это просто для того, чтобы избежать путаницы.

3. setBetHistory принимает массив, а не функцию…. также вам может быть лучше создать переменную для хранения нового массива const newArr = […betHistory]; вызов newArr.push(betCount. toString()) , затем setBetHistory(newArr)……….. Также, почему вы используете массив? набор только из одной вещи?

4. @JonathanAlfaro он может принимать значение данных (в данном случае массив) или функцию, так что часть кода в порядке.

Ответ №1:

Установка состояния обновит значение при следующем рендеринге, а не сразу. Если вам нужно сразу получить доступ к обновленному значению, сохраните его в переменной:

 function placeBet() {  const newBetHistory = [...betHistory, betCount.toString()];  setBetHistory(newBetHistory);  console.log(newBetHistory); }

1. Спасибо за ответ. Я изменил журнал с newBetHistory на betHistory, и он отлично регистрируется, показывает все значения, которые были перенесены. Можете ли вы придумать причину, по которой, если у меня есть console.log(betHistory) в другой функции, которая вызывается после того, как было передано несколько значений, в этой функции журнал снова пуст, как будто никаких значений не было передано. Несмотря на то, что в журнале placeBet() отображаются значения?

2. Другая функция, кстати, вызывается родителем с помощью useRef. Ужасный дизайн, я знаю, но почему, когда родитель вызывает функцию, которая регистрирует betHistory, она снова пуста, несмотря на то, что значения перемещаются?

3. «вызывается после того, как было передано несколько значений» — но является ли это одним и тем же вызовом для визуализации? Это следующий рендеринг, в котором вы ожидаете увидеть обновленное значение в betHistory

4. Привет, я не вызываю никакую функцию рендеринга? Мои родитель и ребенок являются функциональными компонентами, в моем index.js есть вызов для рендеринга с родителем в нем, у родителя есть ребенок в его jsx

5. Хорошо, тогда ваша «функция визуализации» на самом деле является просто телом анонимной функции. Попробуйте войти betHistory в систему сразу после useState этого, и я уверен, что вы увидите правильное значение после установки значения.