React почему не обновляется

React setState not updating state

newDealersDeckTotal is just an array of numbers [1, 5, 9] e.g. however this.state.dealersOverallTotal does not give the correct total but total does? I even put in a timeout delay to see if this solved the problem. any obvious or should I post more code?

11 Answers 11

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

setState() is usually asynchronous, which means that at the time you console.log the state, it’s not updated yet. Try putting the log in the callback of the setState() method. It is executed after the state change is complete:

In case of hooks, you should use useEffect hook.

setState is asynchronous. You can use callback method to get updated state.

The setState is asynchronous in react, so to see the updated state in console use the callback as shown below (Callback function will execute after the setState update)

The setState() operation is asynchronous and hence your console.log() will be executed before the setState() mutates the values and hence you see the result.

To solve it, log the value in the callback function of setState() , like:

I had an issue when setting react state multiple times (it always used default state). Following this react/github issue worked for me

I had the same situation with some convoluted code, and nothing from the existing suggestions worked for me.

My problem was that setState was happening from callback func, issued by one of the components. And my suspicious is that the call was occurring synchronously, which prevented setState from setting state at all.

Simply put I have something like this:

The way I had to «fix» it was to put doUpdate() into setTimeout like this:

Not ideal, but otherwise it would be a significant refactoring.

Источник

Состояние компонента

Что делает setState ?

Метод setState() планирует изменение объекта состояния ( state ) компонента. Когда состояние меняется, компонент рендерится повторно.

Какая разница между state и props ?

props (намеренно сокращённо от англ. «properties» — свойства) и state — это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: props передаётся в компонент (служат как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).

Читайте также:  Почему долго не включается приемник триколор

Несколько полезных ресурсов для дальнейшего изучения, в каких случаях использовать props , а в каких — state :

Почему setState даёт неверное значение?

В React как this.props , так и this.state представляют значения, которые уже были отрендерены, например, то, что видите на экране.

Вызовы setState являются асинхронными, поэтому не стоит рассчитывать, что this.state отобразит новое значение мгновенно после вызова setState . Необходимо добавить функцию, которая сработает только после обновления состояния, если нужно получить новое значение, основанное на текущем состоянии (ниже подробный пример).

Пример кода, который не будет работать так, как ожидаем:

Далее перейдём к исправлению указанной проблемы.

Как обновить состояние значениями, которые зависят от текущего состояния?

Нужно добавить функцию вместо объекта к setState , которая будет срабатывать только на самой последней версии состояния (пример ниже).

В чём разница между добавлением объекта или функции к setState ?

Добавление функции даёт вам доступ к текущему состоянию внутри самой функции. Так как setState вызовы «сгруппированы», это помогает связать изменения и гарантирует, что они будут выполняться друг за другом, а не конфликтовать.

Когда setState работает асинхронно?

В настоящее время setState работает асинхронно внутри обработчиков событий.

Это даёт гарантию, например, когда Родитель и Ребёнок вызывают setState во время клика, Ребёнок не будет рендериться дважды. Вместо этого React «откладывает» обновление состояния в самый конец событий в браузере. Это помогает сильно повысить производительность больших приложений.

Но не стоит полностью полагаться на такое поведение. В будущих версиях React будет использовать отложенные обновления состояния по умолчанию не только в обработчиках событий.

Почему React не обновляет this.state синхронно?

Как говорилось ранее, React намеренно «ждёт» пока все компоненты вызовут setState() в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.

Вы можете задаваться вопросом: почему React не может просто сразу обновить this.state без повторного рендеринга?

На это есть две причины:

  • Это нарушит логику работы props и state , а значит станет причиной многих багов, которые будет сложно исправить.
  • Это сделало бы невозможным реализацию некоторых возможностей, над которыми мы сейчас работаем.

Этот GitHub-комментарий рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.

Стоит ли использовать такие библиотеки, как Redux или MobX?

Но вообще будет здорово сначала изучить React, прежде чем переходить к библиотекам. Можно создать готовое рабочее приложение, используя только React.

Источник

React + Redux почему при обновлении хранилища не обновляется элемент

Пытаюсь сделать так, чтобы после получения данных с сервера компонент автоматом обновлялся. Нашел информацию про функцию connect(), redux-logger показывает, что редюсер отрабатывает, redux-devtools показывает, что хранилище обновляется, но пропсы компонента не изменяются, соответственно компонент не перерисовывается. Как правильно подписать компонент на изменения хранилища.

Хранилище создаю так:

1 ответ 1

Разобрался. Причина была там, где ее не ждали, а именно в

В хранилище попадала более сложная структура данных, а именно

Читайте также:  Почему долго не сдается квартира

Исправление требовалось в

Поля, на которые изначально ориентировался компонент всегда оставались undefined , поэтому компонент и не обновлялся.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript reactjs redux или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.7.27.42681

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Реагировать: почему дочерний компонент не обновляется при изменении проп

Почему в следующем примере псевдокода Child не выполняет повторную визуализацию, когда Контейнер изменяет foo.bar?

Даже если я позвоню forceUpdate() после изменения значения в контейнере, Child все равно покажет старое значение.

Обновите дочерний элемент, чтобы атрибут ‘key’ был равен имени. Компонент будет перерисовываться каждый раз при изменении ключа.

Потому что потомки не перерисовываются, если свойства родителя меняются, но если изменяется его СОСТОЯНИЕ 🙂

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

Вам нужно установить какое-то состояние для родителя, а затем повторно отобразить дочерний элемент в состоянии изменения родителя. Это могло помочь. https://facebook.github.io/react/tips/expose-component-functions.html

У меня такая же проблема. Это мое решение, я не уверен, что это хорошая практика, скажите мне, если нет:

UPD: Теперь то же самое можно делать с помощью React Hooks: (только если компонент — это функция)

Согласно философии React, компонент не может менять свои свойства. они должны быть получены от родителя и должны быть неизменными. Только родитель может изменять свойства своих потомков.

Вам следует использовать setState функцию. В противном случае состояние не сохранит ваше изменение, независимо от того, как вы используете forceUpdate.

Ваш код кажется недействительным. Я не могу протестировать этот код.

При создании компонентов React из functions и useState .

Это не работает

Это работает (добавление ключа)

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

React хочет быть эффективным при создании дочерних компонентов. Он не будет отображать новый компонент, если он такой же, как другой дочерний элемент, что ускоряет загрузку страницы.

Добавление ключа заставляет React отрисовывать новый компонент, таким образом сбрасывая состояние для этого нового компонента.

Используйте функцию setState. Так ты мог бы сделать

внутри метода обработки события.

Как только состояние будет обновлено, оно вызовет изменения, и произойдет повторный рендеринг.

Вероятно, вам следует сделать Child как функциональный компонент, если он не поддерживает какое-либо состояние и просто отображает реквизиты, а затем вызывает его из родителя. Альтернативой этому является то, что вы можете использовать хуки с функциональным компонентом (useState), что приведет к повторной визуализации компонента без состояния.

Также не следует изменять пропа, поскольку они неизменяемы. Поддерживать состояние компонента.

Я столкнулся с той же проблемой. У меня есть Tooltip компонент, который получал showTooltip опору, которую я обновлял для Parent компонента на основе if условия, он обновлялся в Parent компоненте, но Tooltip компонент не отображался.

Читайте также:  Почему выступают не под флагом россии

Ошибка, которую я сделал, — это объявление о сдаче showTooltip в аренду.

Я понял, что делаю неправильно. Я нарушал принципы работы рендеринга. Замена хуков сработала.

Источник

Состояние компонента¶

Что делает setState ?¶

Метод setState() следит за изменением состояния ( state ) компонента. state — это объект. Когда состояние меняется, компонент рендерится повторно.

Какая разница между state и props ?¶

props (намеренно сокращённо от англ. «properties» — свойства) и state — это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: props передаётся в компонент (служат как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).

Несколько полезных ресурсов для дальнейшего изучения, в каких случаях использовать props , а в каких — state :

Почему setState даёт неверное значение?¶

В React как this.props , так и this.state представляют значения, которые уже были отрендерены, например, то, что видите на экране.

Вызовы setState являются асинхронными, поэтому не стоит рассчитывать, что this.state отобразит новое значение мгновенно после вызова setState . Необходимо добавить функцию, которая сработает только после обновления состояния, если нужно получить новое значение, основанное на текущем состоянии (ниже подробный пример).

Пример кода, который не будет работать так, как ожидаем:

Далее перейдём к исправлению указанной проблемы.

Как обновить состояние значениями, которые зависят от текущего состояния?¶

Нужно добавить функцию вместо объекта к setState , которая будет срабатывать только на самой последней версии состояния (пример ниже).

В чём разница между добавлением объекта или функции к setState ?¶

Добавление функции даёт вам доступ к текущему состоянию внутри самой функции. Так как setState вызовы «сгруппированы», это помогает связать изменения и гарантирует, что они будут выполняться друг за другом, а не конфликтовать.

Когда setState работает асинхронно?¶

В настоящее время setState работает асинхронно внутри обработчиков событий.

Это даёт гарантию, например, когда Родитель и Ребёнок вызывают setState во время клика, Ребёнок не будет рендерится дважды. Вместо этого React «откладывает» обновление состояния в самый конец событий в браузере. Это помогает сильно повысить производительность больших приложений.

Но не стоит полностью полагаться на такое поведение. В будущих версиях React будет использовать отложенные обновления состояния по умолчанию не только в обработчиках событий.

Почему React не обновляет this.state синхронно?¶

Как говорилось ранее, React намеренно «ждёт» пока все компоненты вызовут setState() в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.

Вы можете задаваться вопросом: почему React не может просто сразу обновить this.state без повторного рендеринга?

На это есть две причины:

  • Это нарушит логику работы props и state , а значит станет причиной многих багов, которые будет сложно исправить.
  • Это сделало бы невозможным реализацию некоторых возможностей, над которыми мы сейчас работаем.

Этот GitHub-комментарий рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.

Стоит ли использовать такие библиотеки, как Redux или MobX?¶

Но вообще будет здорово сначала изучить React, прежде чем переходить к библиотекам. Можно создать готовое рабочее приложение, используя только React.

Источник

Поделиться с друзьями
Ответ и точка