无限调用 UseEffect UseSelector UseDispatch React.js答案

【问题标题】：Infinite call to UseEffect UseSelector UseDispatch React.js无限调用 UseEffect UseSelector UseDispatch React.js
【发布时间】：2023-04-03 22:12:01
【问题描述】：

使用 getContractsFromAPI 操作，我获得了 API 中的合约列表，然后使用 useState 和 renderContracts，我将它们显示在页面上，但这会启动对 useEffect 的无休止调用

const [contracts, setContracts] = useState({});
    

const contractsList = useAppSelector(({ contractsList }) => contractsList);

useEffect(() => {
    dispatch(getContractsFromAPI());
    setContracts(contractsList);
}, [contractsList, dispatch]);

return (
    <div>
        <h2>Contracts:</h2>
        <ul className={styles.contractsList}>{renderContracts(contracts)}</ul>
    </div>
);

如何解决问题？我试图从 useEffect 中删除 [contractsList, dispatch]，但是在打开页面时不会发生初始渲染

【问题讨论】：

你从哪里得到contractsList？
我编辑了我的问题，现在你可以看到了
你有理由将它复制到 state 中吗？
我尝试在没有useState的情况下渲染contractsList，但它也会触发重新渲染

标签： javascript reactjs redux react-redux frontend

【解决方案1】：

Put dispatch(getContractsFromAPI());在它自己的使用效果中

useEffect(() => {
    setContracts(contractsList);
}, [contractsList, setContracts]);

useEffect(() => {
    dispatch(getContractsFromAPI());
}, [dispatch, getContractsFromAPI]);

因为 getContractsFromAPI 显然是在编辑contractsList，所以你得到了一个无限循环。简单的解决方案是在 useEffect 中使用 getContractsFromAPI，它不会监视contractsList 上的变化

对于任何偶然发现此答案的人的更新：用户更改了他的问题，在他发布问题的时间和我发布答案的时间之间添加了更多上下文。我的回答仍然有效，但对于 @yourBadApple 的具体用例，AKX 的回答更相关

【讨论】：

谢谢！它正在工作！在 1 个组件内使用两次 useEffect 可以吗？
当然，您可以根据需要使用任意数量。一条建议是将具有相同依赖项的那些分组进行观察

【解决方案2】：

如果您真的不需要组件本地状态中合约的浅表副本，请摆脱本地状态并直接从选择器中使用它们。

function ContractsComponent() {
  const contracts = useAppSelector(({ contractsList }) => contractsList);

  // Get contracts from API on mount
  useEffect(() => {
    dispatch(getContractsFromAPI());
  }, [dispatch]);

  if (!contracts) return <>Loading...</>;

  return (
    <div>
      <h2>Contracts:</h2>
      <ul className={styles.contractsList}>{renderContracts(contracts)}</ul>
    </div>
  );
}

【讨论】：

谢谢！它正在工作！