React 父子组件间数组状态管理的最佳实践：实现子组件操作父组件数据过滤

本教程探讨react父子组件间数组状态管理的有效方法。针对子组件触发操作并更新父组件中数组的需求，我们首先分析了直接在子组件中管理状态的不足。随后，介绍了通过将父组件的状态更新函数作为props传递给子组件，以及更推荐的、通过传递特定操作回调函数实现父组件数据过滤的两种模式，旨在提升组件间数据流的清晰度和可维护性。

在React应用开发中，父子组件之间的数据传递和状态管理是核心概念。当父组件持有数组状态，并希望子组件能够触发操作（例如删除或过滤）来修改这个数组时，需要遵循特定的模式以确保数据流的清晰和状态的正确更新。本教程将深入探讨如何高效地实现这一需求。

理解常见挑战

一个常见的错误模式是在子组件中复制父组件的状态。例如，父组件传递一个数组给子组件，子组件内部再使用 useState 来维护这个数组的副本。当子组件修改其内部状态时，父组件的状态并不会自动更新，导致数据不同步。

考虑以下场景：一个父组件 Parent 维护一个待办事项列表 todoData。它将这个列表传递给子组件 Child。Child 组件中有一个删除按钮，点击后期望从列表中移除对应的待办事项，并让父组件感知到这一变化。

初始不当实现示例（示意）：

// Parent 组件（简化版）
import React, { useState } from 'react';

const Parent = () => {
  const todoData = [
    {id:0, todoname:"Study", todotoday:"Completing CSS today"},
    {id:1, todoname:"Coding", todotoday:"Leetcode 2 Problems"}
  ];
  const [myArray, setmyArray] = useState(todoData);

  return (
    

      {myArray.map((obj) => (
        

          {/* ...其他内容... */}
          {/* 这里将整个数组传递给 Child，并且 Child 内部会再次管理这个数组的状态 */}
           
        
      ))}
    
  );
};

// Child 组件（简化版，试图在子组件内部过滤并管理状态）
import React, { useState } from 'react';

const Child = ({ todoList }) => {
  // 在子组件中复制父组件的状态，这是问题的根源
  const [myArray, setmyArray] = useState(todoList); 

  const removeElm = (id) => {
    const myNewArray = myArray.filter((currElm) => currElm.id !== id);
    setmyArray(myNewArray); // 这只会更新子组件内部的 myArray，父组件的状态不会改变
  };

  return (
    

      {myArray.map((obj) => ( // 遍历子组件内部的 myArray
        

           removeElm(obj.id)}>删除 {obj.id} 
        
      ))}
    
  );
};

export default Parent;

上述代码的问题在于，Child 组件内部的 myArray 只是 todoList props 的一个初始副本。当 removeElm 被调用时，它只更新了 Child 内部的 myArray 状态，而 Parent 组件的 myArray 状态并未改变。即使 Parent 组件重新渲染，由于 Child 组件内部的 myArray 已经通过 useState 初始化并独立管理，它也不会自动同步 Parent 的最新状态。

TalkMe

与AI语伴聊天，练习外语口语

下载

解决方案一：通过Props传递父组件的状态更新函数

为了解决上述问题，最直接的方法是让子组件能够直接调用父组件的状态更新函数。React 的单向数据流原则意味着子组件不应该直接修改父组件的 props，但可以通过回调函数的方式通知父组件进行状态更新。

实现方式：

1. 父组件将自己的 setmyArray 函数作为 props 传递给子组件。
2. 子组件接收这个 setmyArray 函数。
3. 当子组件需要修改数据时，它调用父组件传递过来的 setmyArray 函数，并传入过滤后的新数组。
4. 子组件不再需要内部的 useState 来维护 todoList 的副本，因为它直接操作父组件的状态。

示例代码：

// Parent.jsx
import React, { useState } from 'react';
import Child from './Child'; // 假设Child组件在单独的文件中

const todoData = [
  { id: 0, todoname: 'Study', todotoday: 'Completing CSS today' },
  { id: 1, todoname: 'Coding', todotoday: 'Leetcode 2 Problems' },
];

const Parent = () => {
  const [myArray, setmyArray] = useState(todoData);

  return (
    

      {myArray.map((obj) => (
        

          {/* ...其他内容... */}
          
Todo: {obj.todoname}
          
{obj.todotoday}