等待反應上下文后組件不會重新渲染

Question

我正在檢查 isFetchingData 是否還沒有渲染，但是一旦 isFetchingData 設置為 false 就不會重新渲染。 我在上下文中有 useEffect，我希望一旦 isFetchingData 設置為 false 就會重新渲染。 有任何想法嗎？

當我刷新頁面時，它會使用數據呈現。 所以我認為這與重新渲染有關。

我正在使用反應上下文來獲取數據並公開函數來過濾該數據並獲得我需要的東西。

語境：

import React, { useEffect, useState } from 'react';
import getAllEmployees from 'my-services/employee/getAllEmployees';
import { arrayOf, node, oneOfType } from 'prop-types';

export const EmployeeContext = React.createContext({
    allEmployees: [],
    getActiveEmployees: () => [],
    getTerminatedEmployees: () => []
});

const EmployeesProvider = ({ children }) => {
    const [isFetchingData, setIsFetchingData] = useState(true);
    const [allEmployees, setAllEmployees] = useState({});

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


    const context = {
        isFetchingData,
        allEmployees,
        getActiveEmployees: () =>
            allEmployees.filter(x => x.status === 'Current'),

        getTerminatedEmployees: () =>
            allEmployees.filter(x => x.status === 'Terminated')
    };

    return (
        <EmployeeContext.Provider value={context}>{children}</EmployeeContext.Provider>
    );
};

EmployeesProvider.propTypes = {
    children: oneOfType([node, arrayOf(node)])
};
EmployeesProvider.defaultProps = {
    children: undefined
};

export default EmployeesProvider;

成分：

import React, { useContext } from 'react';
import styled from 'styled-components';
import { EmployeeContext } from 'my-contexts/EmployeeContext';
import EmployeeCard from '../../../components/EmployeeCard';


const EmployeesTab = () => {

    const {
        getActiveEmployees,
        getTerminatedEmployees,
        isFetchingData
    } = useContext(EmployeeContext);

    let activeEmployees = [];
    let terminatedEmployees = [];

    if (!isFetchingData) { 
        activeEmployees = getActiveEmployees(); 
        terminatedEmployees = getTerminatedEmployees();
    }

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

    return (
        <Outer>
            <TopHeader>
                <H3>Employees ({activeEmployees.length})</H3>
            </TopHeader>

            <Wrapper>
                {activeEmployees.map(employee => {
                    return (
                        <EmployeeCard
                            id={employee.id}
                            guid={employee.guid}
                            firstName={employee.name.first}
                            lastName={employee.name.last}
                            jobTitle={employee.jobTitle}
                        />
                    );
                })}
            </Wrapper>

            <H3>Terminated employees({terminatedEmployees.length})</H3>
            <Wrapper>
                {terminatedEmployees.map(employee => {
                    return (
                        <EmployeeCard
                            id={employee.id}
                            guid={employee.guid}
                            firstName={employee.name.first}
                            lastName={employee.name.last}
                            jobTitle={employee.jobTitle}
                        />
                    );
                })}
            </Wrapper>
        </Outer>
    );
};

export default EmployeesTab;

Answer 1

我認為可能存在很多問題。
首先，請檢查整個組件是否被上下文提供者關閉。
例如

 <EmployeesProvider> <EmployeesTab/> <EmployeesProvider/>

請檢查這個問題。