如何使用 UseEffect() 钩子将数据从后端加载到材质表?

Question

我是反应新手，我正在尝试使用 UseEffect 钩子向我的后端发出 http 请求以获取一些数据，然后将其显示在 materialTable 中，但状态中的数据直到第二次渲染才更新，这会导致空 dataTable。这是我的代码：

export default function MembersList() {
const [state, setState] = React.useState({
columns: [
{ title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName" }
],
data: []
});
useEffect(() => {
async function fetchData() {
const result = await axios("http://localhost:3300/members");
return result;
}
fetchData().then(result => setState({ data: result.data }));
console.log("useEffect hook is called");
}, []);
console.log("state.data", state.data);
return state.data.length === 0 ? (
"no data to display"
) : (
<MaterialTable
title="Members List"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.push(newData);
setState({ ...state, data });
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data[data.indexOf(oldData)] = newData;
setState({ ...state, data });
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.splice(data.indexOf(oldData), 1);
setState({ ...state, data });
}, 600);
})
}}
/>
);
}

我做错了什么？

Answer 1

React.useState(( 不会像 React.Component 类中可用的 setState 方法那样进行浅合并

setState((prevState) => ({
...prevState,
data: result.data
}))