时间戳

首页 > 解决方案 > 在 useEffect() 中更新对象的状态是否会创建一个新对象？

reactjs - 在 useEffect() 中更新对象的状态是否会创建一个新对象？

问题描述

import { useEffect, useState } from "react";

function CountSecrets() {
  const [secret, setSecret] = useState({ value: "", countSecrets: 0 });

  useEffect(() => {
    if (secret.value === 'secret') {
      setSecret(s => ({...s, countSecrets: s.countSecrets + 1}));    }
  }, [secret]);
  const onChange = ({ target }) => {
    setSecret(s => ({ ...s, value: target.value }));
  };

  return (
    <div>
      <input type="text" value={secret.value} onChange={onChange} />
      <div>Number of secrets: {secret.countSecrets}</div>
    </div>
  );
}

当输入秘密时，反应进入无限循环

我正在通过博客文章阅读此代码，并写道在 useEffect 中设置对象的状态会创建一个新对象，因此useEffect [] 中的依赖关系会发生变化并导致无限循环。

这是我的问题，当我们键入并且 onchange 被触发并且也在更新状态时，更新 onchange 内部的状态不会创建新对象吗？以及创建新对象的情况是什么？

这是博客的链接（第二点）链接

标签： reactjsinfinite-loopuse-effectuse-state

解决方案

React 中的经验法则是状态对象是不可变的，不能直接改变它。因此，每当您想更新状态时，您总是会创建新对象。

查看您的代码，在两种情况下创建的新对象onChange在useEffects. 但是useEffects随着依赖关系的改变而创建无限循环，而 onChange 不会创建无限循环，因为状态更新不会onChange再次

如果你想避免无限循环，我建议两种方法。

  • 将依赖数组从[secret] --> [secret.value]
  • 或者将这 2 个值value, countSecrets作为 2 个不同的状态

总之，当您将对象作为状态时，您应该始终创建新对象并设置它。至于基于值的状态，react 会处理它。

推荐阅读