Question

我有一个包含 UserState.js 页面上的上下文状态

data: null
columns: null

我通过 UserTable.js 上的 useContext 调用它

const userContext = useContext(UserContext);
const {data,columns} = userContext;

对于数据和列里面的内容，会通过axios调用API提取出来。

我面临的困难是，对于特定页面，我还有一个 localData 和 localColumns 是

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

因为在调用它时，数据仍然为空，因此返回错误。我曾尝试使用 useEffect 和/或 useLayout

从数据库中提取

整体文件结构是这样的

-src
--components
---context
----user
-----UserState.js
--pages
---UserPage
----UserTable.js

UserTable.js 看起来像这样

const UserTable = () => {
  useLayoutEffect(() => {
    {
      getAllUser();
    }
  });

  const { data, columns,setAllUserFunc } = userContext;

  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 [localColumns, setlocalColumns] = useState([...columns]);
  const [localData, setlocalData] = useState([...data]);

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

setAllUserFunc 会将数据和列设置为它们在 UserState.js 上的对应，我确认它正在工作（通过评论 localData 和 localColumns 以及表）。

我的问题是如何在设置 localColumns 的 useState 之前调用函数？

useEffect 和 useLayoutEffect 不起作用

如何在 useState 之前调用函数？

0 个答案: