无限调用 UseEffect UseSelector UseDispatch React.js

Question

使用 getContractsFromAPI 操作，我得到了 API 中的合同列表，然后使用 useState 和 renderContracts，我将它们显示在页面上，但这开始了无休止的调用使用效果

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]，但是当页面打开时初始渲染不会发生

Answer 1

派遣（getContractsFromAPI（））;在它自己的 useEffect

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

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

你遇到了一个无限循环，因为 getContractsFromAPI 显然是在编辑 contractsList。简单的解决方案是在不监视 contractsList

上的变化的 useEffect 中使用 getContractsFromAPI

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

Answer 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>
  );
}

无限调用 UseEffect UseSelector UseDispatch React.js

Infinite call to UseEffect UseSelector UseDispatch React.js

javascript

frontend

reactjs

redux

react-redux