如何在React Hook外部函数中更新hookFunction的tableData props（onChange触发）

这是React开发中很常见的单向数据流问题——子组件没办法直接修改父组件传递过来的props，得通过状态提升+回调函数的方式来实现，我给你一步步拆解改造方案：

1. 改造父组件（reactClass.js） #

首先，你需要把tableData变成父组件的状态（而不是硬编码的空数组），同时提供一个更新这个状态的回调函数，传递给子组件App：

// reactClass.js
import React, { useState } from 'react';
import App from './hookFunction';

function ParentComponent() {
  // 将tableData声明为父组件的state
  const [tableData, setTableData] = useState([]);

  // 定义更新tableData的回调函数
  const updateTableData = (newData) => {
    setTableData(newData);
  };

  return (
    // 把状态和回调都传给子组件
    <App tableData={tableData} updateTableData={updateTableData} />
  );
}

export default ParentComponent;

2. 改造子组件链（hookFunction.js） #

接下来，你需要让App组件接收父组件的回调，再把它传递给TableR；同时TableR需要管理自己的输入状态，并在onChange时调用回调更新父组件的tableData：

// hookFunction.js
import React, { useState } from 'react';

function TableR({ data, onUpdateData }) {
  // 管理输入框自身的状态（受控组件必备）
  const [filterValue, setFilterValue] = useState('');

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    // 先更新输入框自身的状态
    setFilterValue(newValue);

    // 这里根据你的业务逻辑处理新的tableData（比如过滤原数据）
    // 示例：假设data里的项有name字段，根据输入模糊匹配
    const newTableData = data.filter(item => 
      item.name?.toLowerCase().includes(newValue.toLowerCase())
    );

    // 调用父组件传过来的回调，触发tableData的更新
    onUpdateData(newTableData);
  };

  return (
    <input value={filterValue} onChange={handleInputChange} />
  );
}

function App({ tableData, updateTableData }) {
  // 将更新回调传递给TableR组件
  return (
    <TableR data={tableData} onUpdateData={updateTableData} />
  );
}

export default App;

核心逻辑说明 #

• 单向数据流规则：React中props是只读的，子组件不能直接修改props，必须由父组件更新自己的state来同步props的变化。
• 状态提升：把需要跨组件共享的状态（这里是tableData）放到共同的父组件中管理，保证数据的单一数据源。
• 回调传递：父组件把更新状态的方法通过props传递给子组件，子组件在需要更新数据时调用这个方法，触发父组件的状态更新，进而同步到所有依赖该状态的子组件。

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