Javascript 反应：如何消除此最大更新深度超出错误

我有一个组件，它的状态是一个对象，我想在

useffect

中设置状态，在那里它循环通过对象的键来更新状态。问题是它给了我一个无限循环的错误

未捕获错误：超出最大更新深度。这可能发生在 组件在componentWillUpdate或 组件更新。React将嵌套更新的数量限制为 防止无限循环

我认为这是因为我用作

useffect

的

dep

的键列表是一个数组，每次组件重新渲染时都是不同的，因为它不是基本类型。所以我用

usemo

记下了它，但它仍然不起作用，然后我意识到这可能是因为memo的

dep

是状态，它也不是一个基本类型，即对象，所以每次都不同，即使使用

usemo

这是密码

const ManageIndexingPage: React.FC = () => {
  const dispatch = useDispatch();
  const stateFromStore = useSelector(
    (state: RootState) => state.settings.indexing
  );
  const [indexingConfig, setIndexingConfig] = useState<IndexingConfig>(
    getDefaultIndexingConfig()
  );

  const listOfKeys = useMemo(
    () => Object.keys(indexingConfig) as Array<keyof typeof indexingConfig>,
    [indexingConfig]
  );

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

  useEffect(() => {
    listOfKeys.forEach((key) =>
      setIndexingConfig((prevState) => ({
        ...prevState,
        [key]: stateFromStore[key]
      }))
    );
  }, [stateFromStore, listOfKeys]);
};

//....

function getDefaultIndexingConfig(): IndexingConfig {
  return {
    thingIndexingEnabled: false,
    thingConnectivityEnabled: false,
    thingDeviceShadowEnabled: false,
    thingGroupIndexingEnabled: false
  };
}

如何在不硬编码密钥列表的情况下消除此错误？或者有更好的方法吗？

问题在于：

 useEffect(() => {
   ....
      setIndexingConfig((prevState) => ({
        ...prevState,
        [key]: stateFromStore[key]
      }))
    );
  }, [stateFromStore, listOfKeys]);

您不应该在

useffect（）

中设置state，因为它取决于每次更改都会导致再次执行useffect。

---

从另一个地方设置状态或使用useRef，因为它不会导致重新加载。

这不是真的。在

useffect

中使用

setState

不一定会导致无限循环，只要状态不是

useffect

的deps的一部分，我说这是因为该效果具有在setState中更新的deps

 useEffect(() => {
   ....
      setIndexingConfig((prevState) => ({
        ...prevState,
        [key]: stateFromStore[key]
      }))
    );
  }, [stateFromStore, listOfKeys]);