Jestem nowy w Reactjs, obecnie pracuję nad tabelą antdesign Chcę pobrać dane z zewnętrznego API i wstawić dane do tabeli ale to daje mi błąd Też go wygooglowałem ale nic nie znalazłem Pomóż mi poniżej jest mój kod
import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";
function App() {
const [state, setstate] = useState({});
const [loading, setloading] = useState(true);
useEffect(() => {
getData();
}, []);
const getData = async () => {
const res = await Axios.get(
"https://jsonplaceholder.typicode.com/comments"
);
setstate(res.data);
setloading(false);
};
const data = loading
? "wait"
: state.map(row => ({ Name: row.name, Email: row.email }));
const columns = [
{
title: "Name",
dataIndex: "Name",
width: 150
},
{
title: "Email",
dataIndex: "Email",
width: 150
}
];
return (
<div>
<Table
columns={columns}
dataSource={data}
pagination={{ pageSize: 50 }}
scroll={{ y: 240 }}
/>
,
</div>
);
}
export default App;
A oto codeandbox.io
2 odpowiedzi
Właściwość danych komponentów <Table /> może być tablicą podobną do struktury danych, gdy wysyłasz jej ciąg, kiedy przypisujesz "wait" do data właściwości i możesz otrzymać błąd z tego powodu, zamiast tego możesz użyć coś jak poniżej:
const data = loading
? []
: state.map(row => ({ Name: row.name, Email: row.email }));
W którym przypisujemy pustą tablicę do danych, gdy są w stanie ładowania, również powinieneś przechowywać dane API w swoim stanie, a nie jako zmienną wewnątrz funkcji, to, co robisz, jest oczywistą złą praktyką !
Oprócz zaakceptowanej odpowiedzi, zwróć uwagę w poniższym fragmencie na warunkowe renderowanie również, jak korzystać z funkcji state, setState. Proponuję sprawdzić dokumentacja na temat korzystania z punktów reagowania:
Oto lepsza implementacja twojego kodu:
import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";
function App() {
const [state, setstate] = useState([]);
const [loading, setloading] = useState(true);
useEffect(() => {
getData();
}, []);
const getData = async () => {
await Axios.get("https://jsonplaceholder.typicode.com/comments").then(
res => {
setloading(false);
setstate(
res.data.map(row => ({
Name: row.name,
Email: row.email,
id: row.id
}))
);
}
);
};
const columns = [
{
title: "Name",
dataIndex: "Name",
width: 150
},
{
title: "Email",
dataIndex: "Email",
width: 150
}
];
return (
<div>
{loading ? (
"Loading"
) : (
<Table
columns={columns}
dataSource={state}
pagination={{ pageSize: 50 }}
scroll={{ y: 240 }}
/>
)}
</div>
);
}
export default App;