Обновление реквизита в реакции Hook формирует внешнюю функцию

Question

   **reactClass.js**

   <hookFunction tableData={[]} />

Как я могу обновить tableData из функции крючка ниже из его внешней функции. Я ожидаю, что обновление произойдет при изменении эффекта.

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

Надеюсь, это поможет!