javascript - 第一次调用 ReactContext 将 isLoading 状态设置为 false

Question

我有组件 A和组件 B，它们都使用相同的 ReactContext 来获取数据。无论哪个组件首先调用上下文，在获取数据结束时，上下文都会将isFetchingData状态设置为false。

现在，当第二个组件调用上下文时，isFetchingData 状态已经设置为 false。因此，它在不等待数据的情况下呈现组件。

为了显示：

ComponentA => isFetchingData? true => getsData => 将 isFetchingData 设置为 false。=>渲染组件

ComponentB => isFetchingData? false =>渲染组件=> getsData => 将 isFetchingData 设置为 false（已经为 false）

我该如何解决这个问题？

以下是我的代码。

语境：

    const [allEmployees, setAllEmployees] = useState([]);
    const [isFetchingData, setIsFetchingData] = useState(true);

    useEffect(() => {
        getAllEmployees().then(
            //doing something
        ).then(employees => {
            setAllEmployees();
            setIsFetchingData(false);
        });
    }, [])

零件：

const ComponentB = () => {

    const {
        allEmployees,
        isFetchingData
    } = useContext(MyContext);


    if(isFetchingData) {
        return <p>'Loading'</p>; // it never hits this as its false
    }

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

标签： javascriptreactjsuse-effectreact-context