更新 useEffect() 中对象的状态会创建一个新对象吗？

Question

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

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

我正在通过博客 post 阅读这段代码，它写道在 useEffect 中设置对象的状态 创建一个新对象 所以里面的依赖useEffect 的 [ ] 变化并导致无限循环.

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

这里是博客的link（第二点）Link

Answer 1

React 中的拇指规则是状态对象是不可变的，不能直接更改它。所以每当你想更新状态时，你总是会创建新对象。

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

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

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

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

更新 useEffect() 中对象的状态会创建一个新对象吗？

Do updating state of an object inside the useEffect() creates a new object?

infinite-loop

reactjs

use-effect

use-state