Рендеринг компонента на основе результатов ajax-запроса?

Question

[MagicMight]

Есть данные, запрашиваемые с сервера через useEffect( () => {fetch(...)} ) (однократно)
Есть функция, которая обрабатывает эти данные, подгоняя под структуру компонента, и выполняет setState(), чтобы применить изменения и отрисовать.

Я так понял, что useEffect не очень дружит с setState, потому вопрос - как стоит организовать цепочку [получение данных] -> [обработка данных] -> [setState]?

Answer 1

[hzzzzl]

Я так понял, что useEffect не очень дружит с setState, потому вопрос - как стоит организовать цепочку [получение данных] -> [обработка данных] -> [setState]?

useEffect вполне дружит с другим хуком useState

const [data, setData] = React.useState(null)

React.useEffect(() => {
  const fetchedData = /* как-то данные получить */
  setData(fetchedData)
}, [])

return data ? <p>{ JSON.stringify(data) } </p> : null

Comments

[MagicMight]

Спасибо. В очередной раз убеждаюсь, что опечатка в совершенно левой части когда способна довести до отчаяния.