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

Question

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

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
}))