javascript - React useEffect 执行最后一个函数

Question

我需要有 2 个不同的功能，在开始时只更新 2 个不同的组件一次。因此，我正在使用useEffect. 代码如下

const loadCategories = () => {
    getCategories().then((c) => setValues({ ...values, categories: c.data }));
}

const loadStores = () => {
    getStores().then((c) => setValues({ ...values, stores: c.data }));
}

useEffect(() => {
  loadStores();
  loadCategories();
}, []);

这两个函数都在设置下拉元素的值

问题是虽然这两个函数都执行了，但只有loadCategories()函数逻辑反映在 UI 中。如何让这两个功能逻辑都反映在 UI 中？

标签： javascriptreactjsuse-effect

Answer 1

等待两个 promise 解决，然后使用两者中的数据来更新您的状态，并以您认为合适的任何方式组合。

useEffect(() => {
    Promise.all([getCategories(), getStores()]).then(([categories, stores]) => {
      setValues({categories, stores})
    });
}, []);

您之前遇到的问题（正如您所经历的那样）始终是在此渲染上运行values的点的值。useState

如果您真的想单独进行更新，则可以查看 useReducer：https ://reactjs.org/docs/hooks-reference.html#usereducer