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

Question

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

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);
}

主页上的员工数组示例：

let employees = [
{
    _id: 2,
    firstName: 'Some',
    lastName: 'One',
    department: 'Somewhere',
    jobTitle: 'Something',
    email: 'ghi@jkl.com',
    phoneExtension: 67890
},
]

表格渲染代码示例：

<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>

因此，理想情况下，过滤器会更新员工数组，然后表格将使用更新后的数组重新渲染，以仅反映每个过滤器的数组的适当部分。但是，当前数组正在更新，但表格没有重新渲染。

我对 React 比较陌生，但我的理解是组件会在其状态或道具发生变化时重新渲染。虽然我不知道如何从 Filter 组件中更改 Table 组件的状态，但似乎应触发它的 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;

Answer 1

您的主要问题是您正在变异道具。在 React 中，你不能改变 props 或 state。 解决这个问题的更好方法是将回调函数传回 Filter 组件，该组件在Employees 组件中调用 setState（或等效的钩子）。

除此之外，您还需要使您的 employees 和 employeesControl 成为员工组件中状态的一部分。

这是因为 React 使用引用来确定值是否更改以及组件是否需要重新渲染。它还使用 setState 功能告诉他们需要重新渲染的组件。然后他们也会重新渲染孩子。

如果您需要将数据传递到比父子更远的组件并改进数据流，那么您可以使用 Context、Redux 或 React 生态系统中的无数其他状态管理功能之一。

Answer 2

如果我理解得很好，你有 和 作为你的组件的孩子。

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

1. 在您的父母中处理您的数据，然后将其传递给您的孩子。
2. 实施上下文 API（推荐） 以通过您的应用处理“全局上下文”。这样，您将能够在组件中操作数据并发送结果以更新您的商店（将商店视为您的上下文的内容）。如果您的组件通过 useContext() 钩子获取状态并将其作为道具传递给您的孩子，那么更新商店会自动重新渲染它们。 上下文 Api 很容易理解，您只需了解其他钩子 useReducer() 和 useContext()。

对于所需的所有这些知识，我只能给你我在这个主题上找到的最好的文章：Mixing Hooks and Context API。

官方文档也很容易理解，并提供了您需要的清晰示例。

• Context API
• Hooks

希望对您有所帮助！

Answer 3

在 react.js 中，当 state 或 props 发生变化时，组件会重新渲染。你可以改变 state，但你不应该改变 props。在 react.js 中，props 是只读的。