Javascript 如何在React中从一个组件重新渲染另一个组件

在我的React代码中，我有一个Employees页面，它同时呈现一个表组件和一个过滤器组件。过滤器代码处理存储在Employees页面中的一些数据，然后通过useEffect更新过滤器的状态。有问题的数据作为道具传递给过滤器组件和表组件。但是，发生此更改时，只有过滤器组件正在重新渲染。下面的代码摘录。 过滤函数示例：

function filterFunction() {
    let spliceArray = [];
        if ($('#firstNameFilter').val() !== '') {
            for (let i = 0; i < props.employees.length; i++) {
                if(props.employees[i].firstName !== $('#firstNameFilter').val()) {
                    spliceArray.push(i);
                }
            }
            for (let i = spliceArray.length - 1; i >= 0; i--) {
                props.employees.splice(spliceArray[i], 1);
            }
        }
    setUseFilter(true);
}

表呈现代码示例：

<tbody>
                {props.employees.map((employee) => {
                   <tr>
                        <td><i id={employee._id + "upd"} className="fas fa-edit" onClick={handleEdit}></i></td>
                        <td><i id={employee._id + "del"} className="fas fa-trash-alt" onClick={deleteEmployee}></i></td>
                        <td>{employee.firstName}</td>
                        <td>{employee.lastName}</td>
                        <td>{employee.department}</td>
                        <td>{employee.jobTitle}</td>
                        <td>{employee.email}</td>
                        <td>{employee.phoneExtension}</td>
                    </tr>
</tbody>

{props.employees.map（（employee）=>{
{employee.firstName}
{employee.lastName}
{雇员.部门}
{employee.jobTitle}
{employee.email}
{employee.phoneExtension}

因此，理想情况下，筛选器将更新employees数组，然后使用更新后的数组重新呈现表，以仅反映每个筛选器的数组的适当部分。但是，当前正在更新数组，但未重新呈现表

我是一个比较新的反应者，但我的理解是，只要组件的状态或道具发生更改，组件就会重新呈现。虽然我不知道如何从筛选器组件中更改表组件的状态，但似乎employees数组道具中的更改应该触发它

感谢您的帮助

根据请求，完整的员工档案如下：

import React from 'react';
import Title from '../components/Title/Title.js';
import Table from '../components/Table/Table.js';
import Filter from '../components/Filter/Filter.js';
import { Container, Row, Col } from '../components/Grid/Grid.js';
import axios from 'axios';

let employees = [
{
    _id: 2,
    firstName: 'Some',
    lastName: 'One',
    department: 'Somewhere',
    jobTitle: 'Something',
    email: 'ghi@jkl.com',
    phoneExtension: 67890
},
{
    _id: 3,
    firstName: 'Test',
    lastName: 'McTester',
    department: 'Sales',
    jobTitle: 'Seller',
    email: 'mno@pqr.com',
    phoneExtension: 13579
}];

let employeesControl = [
{
    _id: 2,
    firstName: 'Some',
    lastName: 'One',
    department: 'Somewhere',
    jobTitle: 'Something',
    email: 'ghi@jkl.com',
    phoneExtension: 67890
},
{
    _id: 3,
    firstName: 'Test',
    lastName: 'McTester',
    department: 'Sales',
    jobTitle: 'Seller',
    email: 'mno@pqr.com',
    phoneExtension: 13579
}];

function Employees() {    
    return(
        <Container fluid>
            <Row>
                <Col size="md-12">
                    <Title>Employee Directory</Title>
                </Col>
            </Row>

            <Row>
                <Col size="md-12">
                    <Filter employees={employees} employeesControl={employeesControl}/>
                </Col>
            </Row>

            <Row>
                <Col size="md-12">
                    <Table employees={employees} />
                </Col>
            </Row>
        </Container>
    );
}

export default Employees;

从“React”导入React；
从“../components/Title/Title.js”导入标题；
从“../components/Table/Table.js”导入表；
从“../components/Filter/Filter.js”导入过滤器；
从“../components/Grid/Grid.js”导入{Container，Row，Col}；
从“axios”导入axios；
让员工=[
{
_id:2，
名字：'一些'，
姓氏：“一”，
部门：'某处'，
职位名称：“某物”，
电邮:'ghi@jkl.com',
电话分机：67890
},
{
_id:3，
名字：'测试'，
姓氏：“McTester”，
部门：'销售'，
职位名称：'卖方'，
电邮:'mno@pqr.com',
电话分机：13579
}];
让employeesControl=[
{
_id:2，
名字：'一些'，
姓氏：“一”，
部门：'某处'，
职位名称：“某物”，
电邮:'ghi@jkl.com',
电话分机：67890
},
{
_id:3，
名字：'测试'，
姓氏：“McTester”，
部门：'销售'，
职位名称：'卖方'，
电邮:'mno@pqr.com',
电话分机：13579
}];
函数（）{
返回(
员工名录
);
}
导出默认员工；

您的主要问题是您正在变异道具。在React中，您不能变异道具或状态。 处理此问题的更好方法是将回调函数传递回调用Employees组件中的setState（或等效钩子）的筛选器组件

除此之外，您还需要使您的

employees

和

employees控件成为employees组件中状态的一部分

这是因为React使用引用确定值是否已更改，组件是否需要重新渲染。它还使用setState功能告知组件需要重新渲染。然后它们也将重新渲染子组件

如果您需要将数据传递到比父子关系更远的组件中并改进数据流，那么您可以使用上下文、Redux或React生态系统中的众多其他状态管理功能之一。
如果我理解得很清楚，您作为组件的子组件拥有和

您的问题有两种解决方案：

在将数据传递给您的孩子之前，操作您父母中的数据

实现上下文API（推荐）通过应用程序处理“全局上下文”。通过这种方式，您将能够操作组件中的数据，并发送结果以更新存储（将存储视为上下文内容）。如果您的组件通过useContext（）获得状态钩住并将其作为道具传递给您的孩子，然后更新存储自动重新渲染他们。
上下文Api非常容易理解，您只需了解其他挂钩useReducer（）和useContext（）

对于所有这些知识的要求，我只能给你最好的文章，我发现在这个主题：

官方文件也很容易理解，并提供了清楚的例子说明你需要什么





希望有此帮助！
在react.js中，当状态或道具发生更改时，组件将重新呈现。您可以更改状态，但不应更改道具。在react.js中，道具是只读的。
请添加
过滤器
和
表
组件代码的父级，这可能是问题所在
import React from 'react';
import Title from '../components/Title/Title.js';
import Table from '../components/Table/Table.js';
import Filter from '../components/Filter/Filter.js';
import { Container, Row, Col } from '../components/Grid/Grid.js';
import axios from 'axios';

let employees = [
{
    _id: 2,
    firstName: 'Some',
    lastName: 'One',
    department: 'Somewhere',
    jobTitle: 'Something',
    email: 'ghi@jkl.com',
    phoneExtension: 67890
},
{
    _id: 3,
    firstName: 'Test',
    lastName: 'McTester',
    department: 'Sales',
    jobTitle: 'Seller',
    email: 'mno@pqr.com',
    phoneExtension: 13579
}];

let employeesControl = [
{
    _id: 2,
    firstName: 'Some',
    lastName: 'One',
    department: 'Somewhere',
    jobTitle: 'Something',
    email: 'ghi@jkl.com',
    phoneExtension: 67890
},
{
    _id: 3,
    firstName: 'Test',
    lastName: 'McTester',
    department: 'Sales',
    jobTitle: 'Seller',
    email: 'mno@pqr.com',
    phoneExtension: 13579
}];

function Employees() {    
    return(
        <Container fluid>
            <Row>
                <Col size="md-12">
                    <Title>Employee Directory</Title>
                </Col>
            </Row>

            <Row>
                <Col size="md-12">
                    <Filter employees={employees} employeesControl={employeesControl}/>
                </Col>
            </Row>

            <Row>
                <Col size="md-12">
                    <Table employees={employees} />
                </Col>
            </Row>
        </Container>
    );
}

export default Employees;