不等待 useEffect 中的数据答案

【问题标题】：Not awaiting for data in useEffect不等待 useEffect 中的数据
【发布时间】：2020-10-21 13:35:38
【问题描述】：

我的组件中有一个 useEffect 正在等待来自上下文的数据，以便它可以将其设置为状态。但它没有等待状态，而是继续下一行代码将 isLoading 设置为 false。

我希望它等待数据，以便我可以渲染加载。

我尝试在上下文中设置 isFetchingData，但遇到了问题，如果另一个组件首先调用它，它会将 isFetchingData 状态设置为 false。

First call to ReactContext is setting the isLoading sate to false

结果返回没有记录也没关系。该组件将呈现“未找到记录”。因此，我无法检查状态的长度来判断长度是否为零，然后继续加载。

以下是我的代码：

上下文


    const [activeEmployees, setActiveEmployees] = useState([]);
    const [terminatedEmployees, setTerminatedEmployees] = useState([]);

    useEffect(() => {

            getEmployees()
                .then(response => {
                    /// some code...
                    setActiveEmployees(response.activeEmployees)
                    setTerminatedEmployees(response.terminatedEmployees)
                });

    });

组件

const EmployeesTab = () => {

    const { activeEmployees, terminatedEmployees } = useContext(BlipContext);


    //Component states
    const [isFetchingData, setIsFetchingData] = useState(true);

    const [newEmployees, setNewEmployees] = useState([]);
    const [oldEmployees, setOldEmployees] = useState([]);

    useEffect(() => {
        async function getData() {
            await setNewEmployees(activeEmployees);
            await setOldEmployees(terminatedEmployees);
            setIsFetchingData(false);
        }
        getData();
    }, [activeEmployees, terminatedEmployees, isFetchingData]);


    if(isFetchingData) {
        return <p>'Loading'</p>;
    }

    return (
    // if data is loaded render this
    );
};

export default EmployeesTab;

【问题讨论】：

上下文必须设置 isFetchingData 标志，现在您只是在等待：使用与数据检索无关的 useState 方法。或者只是检查数据是否存在。
@GuyIncognito 感谢您的 cmets。我尝试了这种方法，但我有多个组件调用上下文，它会将 isFetchingData 设置为 false。见stackoverflow.com/questions/64462393/…
如果结果可以是一个空数组，那你为什么要使用一个空数组作为默认状态呢？ useState(null) 最初并检查是否为空。虽然我不明白为什么多个组件会产生任何影响。
@GuyIncognito 抱歉没有澄清.. 多个组件会有所不同，因为它是一个 ReactContext。因此，如果一个组件调用它。该州已经有记录了。执行一些操作后，我想在第二个组件调用它时重新获取新数据。

标签： reactjs use-effect use-state

【解决方案1】：

由于您的useContext 中有useState，我看不出再次将activeEmployees 存储在另一个状态中的意义。

如果你想有一个本地加载变量，它可能是这样的：

const loading = !(activeEmployees.length && terminatedEmployees.length);

loading 将在 getEmployees 更改时更新。

回答你的问题，await 没有效果的原因是因为setState 是同步的。

【讨论】：

感谢您的回答。唯一的问题是返回零记录很好。它将呈现为“未找到记录”。否则会无限加载，
我明白了，所以如果你有一个空状态和一个加载状态，你需要一个加载变量来跟踪它，我会将它添加到上下文中，在 getEmployees 将加载设置为 true 之前，以及何时已完成设置为假。即使其他人调用该上下文，加载也会正常。
我尝试了将其添加到上下文的方法，但遇到了无法将加载状态重置为其初始状态 true 的问题。请看看这个，因为这是我首先尝试的......stackoverflow.com/questions/64462393/…
看看这个样本codesandbox.io/s/sharp-chebyshev-n0df5