更新 React Hook 中的 props 形式的外部函数

Question

   **reactClass.js**

   <hookFunction tableData={[]} />

如何从下面的钩子函数中从其外部函数更新 tableData。 我希望更新会发生 onChange 效果。

**hookFunction.js**

import React from 'react';

function TableR({ data }) {
   return (
    <input
      value={filterValue || ''}
      onChange={(e) => {
        // update props `tableData`
      }}
    />
  );
}

function App({tableData}) {
  return (

     return <Table  data={tableData} />;

  );
}

export default App;

Answer 1

您可以使用钩子useState 和useEffect 来监听道具更新：

function TableR({ data, setTableData }) {
   return (
    <input
      value={filterValue || ''}
      onChange={(e) => {
        setTableData(e.target.value);
      }}
    />
  );
}

function App({tableData}) {
  const [data, setTableData] = useState(tableData);

  useEffect(() => {
    // this will update the state if tableData coming as props changes
    setTableData(tableData);
  }, [tableData]);

  return <Table  data={data} setTableData={setTableData} />;
}

希望这会有所帮助！