Question

根据我之前来自 How to run useEffect and setState multipletime on useEffect 的问题，Drew Reese 说要在一次渲染中更新两个状态，我应该使用功能状态更新。

我遇到的问题是，我有两种状态，一种来自 React Reducer 的状态，一种来自本地 useState。

我想要实现的是在useEffect期间，我的第一个函数更新Reducer的State，然后更新后，将根据Reducer的State更新本地useState。

UserTable.js 上的示例代码

const UserTable = () => {
  useEffect(() => {
    {
      getAllUser();
      updateLocalColumns();
    }
  }, []);
  const userContext = useContext(UserContext);
  const { data, columns, setAllUserFunc } = userContext;

  const [localColumns, setlocalColumns] = useState(columns);
  const [localData, setlocalData] = useState(data);

  const getAllUser = () => {
    axios
      .get("http://localhost:3000/v1/users", {
        headers: {
          Authorization: "Bearer " + token.access.token,
        },
      })
      .then((response) => {
        let allUser = response.data.results;
        let allNormalUser = allUser.filter((user) => user.role == "user");
        setAllUserFunc(allNormalUser);
      })
      .catch((error) => {});
  };

  const updateLocalColumns = () => {
    setlocalColumns([...columns])
    setlocalData([...data])
  }

  return (
      <Table columns={localColumns} dataSource={localData} />
  )
}

在我的减速器部分

case SET_ALL_USER:
      let col = Object.keys(action.payload[0]);
      let mapped_col = col.map((item) => ({ title: item.charAt(0).toUpperCase() + item.slice(1), dataIndex: item, key: item }));

      let data = Object.values(action.payload);
      let mapped_data = data.map((item, index) => {
        item["key"] = 1;
        item["address"] = 0;
        return item;
      });

      return {
        ...state,
        columns: mapped_col,
        data: mapped_data,
      };

如果代码太多了，我应该从哪里开始写？我应该注意什么？

如何使用 React Reducer 调用功能状态更新

0 个答案: