React中如何经父组件中转实现child2向child1传值更新数组

child1 维护item数组，child2 触发更新的场景，核心遵循React状态上提原则：将两个子组件共享的状态、更新逻辑放到共同父组件维护，父组件把状态下发给需要渲染的子组件，把更新回调传给触发操作的子组件，走标准单向数据流即可，不需要硬调子组件内部方法。 #

原有代码问题说明 #

• 子组件把父组件传入的props重复存入本地state，会导致props更新时子组件状态不同步
• 直接修改原数组后调用setState，数组引用没有变化，React无法检测到状态变更，不会触发页面重渲染
• 用indexOf查找对象类型的数组成员不可靠：对象是引用类型，除非是同一个内存引用，否则indexOf永远返回-1，应该用item的唯一标识（比如id）匹配目标元素

分步代码修改 #

1. 父组件改造 #

父组件统一维护共享的item数组和更新方法，分别传递给两个子组件：

import { useState } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

// 你的Item类型定义
type Item = {
  id: string | number;
  // 其他item字段
}

export default function Parent() {
  // 共享状态上提到父组件
  const [currentItems, setCurrentItems] = useState<Item[]>(/* 替换为你的初始数组 */);

  // 更新item的逻辑统一放在父组件
  const handleUpdateItem = (newItem: Item) => {
    setCurrentItems(prevList => {
      // 用唯一标识匹配目标item位置
      const targetIndex = prevList.findIndex(item => item.id === newItem.id);
      if (targetIndex < 0) return prevList;
      // 返回新数组，保证引用变化触发重渲染
      const updatedList = [...prevList];
      updatedList[targetIndex] = newItem;
      return updatedList;
    })
  }

  return (
    <>
      {/* 下发最新状态给child1用于渲染 */}
      <Child1 currentItems={currentItems} />
      {/* 传递更新回调给child2用于触发操作 */}
      <Child2 onItemUpdate={handleUpdateItem} />
    </>
  )
}

2. Child1组件改造 #

删除本地重复的state定义和更新方法，直接使用父组件传入的props渲染即可：

type Child1Props = {
  currentItems: Item[];
}

export default function Child1({ currentItems }: Child1Props) {
  // 直接用currentItems渲染列表，不需要再存本地state
  return (
    <div className="item-list">
      {currentItems.map(item => (
        <div key={item.id}>{/* 你的item渲染内容 */}</div>
      ))}
    </div>
  )
}

3. Child2组件改造 #

接收父组件传入的回调，在点击事件中调用，把要更新的item传递给父组件即可：

type Child2Props = {
  onItemUpdate: (item: Item) => void;
}

export default function Child2({ onItemUpdate }: Child2Props) {
  const handleItemClick = (item: Item) => {
    // 调用父组件回调，传入选中的item即可完成更新链路
    onItemUpdate(item);
  }

  return (
    <div className="item-operate">
      {/* 你的操作区域，比如点击按钮触发更新 */}
      {operateItems.map(item => (
        <button key={item.id} onClick={() => handleItemClick(item)}>
          更新对应项
        </button>
      ))}
    </div>
  )
}

不推荐用useRef获取child1实例直接调用内部updateItem方法的实现，这种方式打破了React单向数据流约定，后续状态变更溯源难度高，也很容易出现状态不一致的问题。

内容的提问来源于stack exchange，提问作者Barty