@FairyTaleComposer
Front-end разработчик, перехожу на backend

Почему результат fetch запроса внутри useEffect не записывается в state через useState?

import { useState, useEffect } from 'react';
import './App.css';
//import Loader from './components/Loader/Loader';
//import Error from './components/Error/Error';
import Form from './components/Form/Form';
import Table from './components/Table/Table';


export default function App() {
  const [tableData, setTableData] = useState(null);

  useEffect(() => {
    async function getTableData() {
      try {
        await fetch('http://localhost:5000')
          .then((res) => { return res.json() })
          .then((data) => { 
             //console.log(data)
            setTableData(data) 
          })
      }
      catch (err) {
        console.error(err);
      }
    }
    getTableData();
  }, []);

  return (
    <div className="wrapper">
        <Form />
        { tableData && <Table data={tableData} /> }
    </div>
  );
}


Здесь data корректно приходит с сервера и после res.json() она выводится в консоль, но в tableData не хочет записываться. Почему? И как её туда записать? В данном случае я пытаюсь сделать изначальную загрузку данных. Но мне потом потребуется их обновлять после действий пользователя (если он меняет фильтры), так что в state необходимо записать в любом случае...

Я нашла ошибку и исправила! Для тех, кто столкнулся с подобным:
В компоненте TableData, я принимала data без фигурных скобок. Я их добавила и всё заработало. На самом деле, до этого были проблемы и в самом запросе и именно не записывался ответ сервера в tableData. Это уже когда я вопрос формулировала, переписала код ещё раз, убрав всё лишнее и часть проблем, видимо, тоже)) Тогда осталась только ошибка со скобками. Просто как итог я получала в консоли всё ту же ошибку из компонента TableData "data.map is not a function", то есть почему-то компонент с таблицей получал не массив, а что-то другое.

Хотя мне всё же не понятно, откуда взялась обёртка в виде объекта, когда я с сервера отправляю массив.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
Всё работает, ищи ошибку в другом месте:
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Зачем async и await? Убери их из кода, тут они бесполезны
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы