reactjs - 更新 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;

标签： reactjsreact-hooksreact-props

Answer 1

你可以使用 hook useStatewithuseEffect来监听 prop 更新：

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

希望这可以帮助！