为什么我的 UseState 挂钩总是失败？

Question

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

Answer 1

由于重新渲染，它看起来像 Whosebug。 setAllData(searchResults); 将重新渲染组件并再次进行 api 调用并重新调用。

正确的调用方式API。

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

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

Answer 2

假设 paginationForDataAdded 是一个 returns 一个 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 挂钩总是失败？

Why does my UseState hook keeps on failing?

reactjs

react-hooks

use-state