React не обновляет проходящую опору

#javascript #reactjs #destructuring #react-state

Вопрос:

Я деструктурирую переменную из состояния реакции в render() моего компонента класса следующим образом:

 let { indexTabPoints } = this.state;

После этого я изменю его значение:

 if (condition) {  indexTabPoints  = 1;  console.log(indexTabPoints); // value's changing as it should }

А затем я передаю точки индексации в качестве поддержки другому компоненту:

 lt;PointTab  activeIndex={indexTabPoints}  .... /gt;

После этого я проверяю значение activeIndex в компоненте PointTab и вижу старое значение (без каких-либо изменений).

Мне кажется, что React не обновляет опору, которую я передаю компоненту PointTab, всякий раз, когда она меняется или нет. Почему это происходит и как этого избежать, используя деструктурирование?

Отредактировано: Я только что заметил, что у меня есть несколько дочерних компонентов, а другой (в другом месте) говорил мне, что значение старое (потому что для него значение не изменилось). Спасибо всем вам, ребята, за помощь, простите мне мою беспечность.

1. Пожалуйста, приведите минимальный неработающий пример, потому что код, который вы предоставляете, в порядке

2. indexTabPoints = 1; При каких обстоятельствах вы это делаете? Это только часть расчетов, в которых вы участвуете render() ? Или происходит какое-то событие (скажем, onClick), и вы пытаетесь обновить значение?

3. На данный момент (для тестов) условие просто (верно), но на самом деле оно верно, когда некоторые другие переменные имеют нужные мне значения. Ничто не вычисляется в самом состоянии.

Ответ №1:

Реквизит неизменен

И вы не можете обновить состояние как indexTabPoints = 1; , вместо этого вы можете сделать как this.setState((prev) =gt;({indexTabPoints: prev 1})) , и вы не должны регистрировать значение состояний сразу после его установки, так как setState асинхронен во время работы консоли.журнал выполняется немедленно

Можете попробовать это (но только для отладки):

 if (condition) {  indexTabPoints  = 1;  setTimeout(() =gt; console.log(indexTabPoints), 1000); }

пример для отладки, чтобы понять, вызывается ли компонент перед условием if:

 if (condition) {  indexTabPoints  = 1;  console.log("in if condition"   indexTabPoints); }   render(){  return(  {  console.log(" in render"   indexTabPoints)  }  lt;PointTab  activeIndex={indexTabPoints}  ....  /gt;); }

1. Да, но я использую деструктурированную переменную при передаче реквизита другому компоненту, а не само значение состояния, поэтому this.setState() изменит значение в состоянии, но не деструктурированную переменную, не так ли?

2. ДА. Условие «если» находится только в дочернем компоненте или только в родительском?

3. Только для родителей. А затем я проверяю переданное значение реквизита в начале дочернего компонента, без каких-либо «если».

4. Возможно, компонент вызывается до изменения значения, поэтому я бы предложил сослаться на приведенный выше пример для отладки

5. Ну, даже без setTimeout он показывает правильное значение (включая 1), но другой console.log (в компоненте, где я передал indext-точки) все равно регистрирует старое значение (не включая 1).