更新反應鈎子形式的外部函數中的道具

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

你可以使用帶有useEffect的鈎子useState來監聽 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} />;
}

希望這可以幫助！