为什么我的 UseState 钩子总是失败？答案

【问题标题】：Why does my UseState hook keeps on failing?为什么我的 UseState 钩子总是失败？
【发布时间】：2020-06-13 10:42:49
【问题描述】：

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

【问题讨论】：

听起来你的控制台有多个错误，但你只阅读了最后一个。请显示上一个错误。
您能否在代码 sn-p 中发表评论，以指导我们究竟是哪一行触发了错误？谢谢
页面完全空白，在控制台中它只是提到了上述错误发生在表格组件中：在......我正在使用的一整套文件
我提到了这条线。当我尝试更新状态时。
对 Table 中的这个 props 感兴趣，data={searchResults.resultarray || []}，请提一下searchResults 的初始状态以及最初引入的resultarray 在哪里？

【解决方案1】：

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

调用 API 的正确方式。

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

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

【讨论】：

你使用useEffect钩子的方式看起来根本不正确......
React Hook "paginationForDataAdded" 不能在回调中调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用
@goto1 我的错。已更正
@BrattyNeal 您正在使用 useState.So，它的功能组件。
假设paginationForDataAdded 是一个钩子，这仍然是不正确的，它应该在useEffect 之外使用，然后你会在依赖数组中指定searchResults 以更新allData状态。现在，每次重新渲染后都会调用它。

【解决方案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={[...]}
    />
  );
}

希望这会有所帮助。

【讨论】：