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", то есть почему-то компонент с таблицей получал не массив, а что-то другое.
Хотя мне всё же не понятно, откуда взялась обёртка в виде объекта, когда я с сервера отправляю массив.
Простой