React Hook setState не установлен на обещании

Я использую Contentful CMS JS SDK, и приведенный ниже код не обновляет состояние React Hook. Я считаю, что это скорее обещания в сочетании с реагирующими хуками в сочетании с проблемой рендеринга React. Я понимаю, что обещание устанавливает значение хука, когда оно разрешается в более позднее время, но к тому времени мой компонент уже отрендерился с начальными данными (пустая строка), поэтому, если это так, как я могу сделать свой компонент повторно? render, когда состояние хука реакции установлено с правильным значением из обещания, чтобы моя кнопка отображала его. Любая помощь приветствуется. Спасибо

Проблема кроется здесь.

...
import client from 'contentful'
  const [name, setName] = useState('')

  client.getEntry(data.fields.store.sys.id)
    .then(entry => setName(entry.fields.name))
    .catch(console.error)

  console.info('STORE URL', name) // name is not set
...
<Button title = {name} /> // name still not set
....

он автоматически перерисовывается, если это пустая строка, то наиболее вероятной причиной является то, что обещание никогда не разрешалось (и код внутри then никогда не выполнялся) - вы можете добавить туда журнал консоли, чтобы проверить

Aprillion 21.05.2019 11:00

..во-вторых, скорее всего, entry.fields.name тоже пустая строка

Aprillion 21.05.2019 11:00

совет: сделайте .then(entry => console.info("entered then", entry) || setName(entry.fields.name)), чтобы вы могли сохранить функцию стрелки с одним вкладышем

Murilo Cruz 21.05.2019 13:24

console.info работает и выводит правильное значение, так что это должно означать, что состояние имени (перехватчик setName) также установлено с правильным значением. Но моя кнопка не получает имени, кроме своего начального значения пустой строки.

user3047450 21.05.2019 14:07
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
4
5 889
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я только что попробовал ваш код, и, похоже, он работает для меня. :)

https://codesandbox.io/embed/react-hooks-demo-e4wgo

Я думаю, вам следует использовать useEffect, как описано в этой статье.

Другие вопросы по теме