Question

我正在检查isFetchingData是否尚未渲染，但是一旦将isFetchingData设置为false，它就不会重新渲染。我在上下文中有useEffect，我希望一旦将isFetchingData设置为false，它将重新呈现。有什么想法吗？

当我刷新页面时，它将与数据一起呈现。因此，我认为这与重新渲染有关。

我正在使用react上下文来获取数据，并使用函数来过滤该数据并获取我所需要的东西。

上下文：

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;

组件：

const user = '5454654687868768'
const role = '451079228381724672'

user.roles.remove(role)

Answer 1

我认为可能存在许多问题。
首先，请检查上下文提供者是否关闭了整个组件。
例如

<EmployeesProvider>
  <EmployeesTab/>
<EmployeesProvider/>

请检查此问题。

等待React上下文后组件未重新渲染

1 个答案: