Question

我想使用 UseState 钩子来更新Table组件中的数据。 Table组件中要使用的数据由导入的paginationForDataAdded另一个函数获取。

Answer 1

由于重新渲染，它看起来像stackoverflow。 setAllData(searchResults);将重新呈现该组件，并再次调用api并重新发送。

正确的API调用方式。

 const [allData, setAllData] = useState([]);

useEffect(function () {
  const {
    searchResults,
    furnishedData,
    entitledData
  } = paginationForDataAdded({
    searchFunction: search,
    collectionsData: collections
  });
  setAllData(searchResults);
});

Answer 2

假设paginationForDataAdded是一个返回Promise的函数，该函数使用类似于以下内容的对象进行解析：

{ 
  searchResults: { resultarray: [...] }, 
  furnishedData: [...], 
  entitledData: [...] 
}

您应该在输入组件中执行以下操作：

function App(props) {
  const [allData, setAllData] = React.useState([]);
  // ...

  React.useEffect(() => {
    paginationForDataAdded({
      searchFunction: search,
      collectionsData: collections,
    })
    .then(
      ({ searchResults, furnishedData, entitledData }) => {
        const nextAllData = searchResults.resultarray || [];
        setAllData(nextAllData);
      }
    )
    .catch(/* handle errors appropriately */);

    // an empty dependency array so that this hooks runs
    // only once when the component renders for the first time
  }, [])

  return (
    <Table 
      id="pop-table"
      data={allData}
      tableColumns={[...]}
    />
  );
}

但是，如果paginationForDataAdded不是异步调用，则应执行以下操作：

function App(props) {
  const [allData, setAllData] = React.useState([]);
  // ...

  React.useEffect(() => {
    const {
      searchResults,
      furnishedData,
      entitledData,
    } = paginationForDataAdded({
      searchFunction: search,
      collectionsData: collections
    });
    const nextAllData = searchResults.resultarray || [];
    setAllData(nextAllData)

    // an empty dependency array so that this hooks runs
    // only once when the component renders for the first time
  }, [])

  return (
    <Table 
      id="pop-table"
      data={allData}
      tableColumns={[...]}
    />
  );
}

希望这会有所帮助。

为什么我的UseState挂钩不断失败？

2 个答案: