Reactjs 更新useEffect（）中对象的状态是否会创建新对象？ 从“react”导入{useffect，useState}； 函数CountSecrets（）{ const[secret，setSecret]=useState（{value:，countSecrets:0}）； useffect（（）=>{ 如果（secret.value==='secret'）{ setSecret（s=>（{…s，countSecrets:s.countSecrets+1}））；} }，[秘密]； const onChange=（{target}）=>{ setSecret（s=>（{…s，value:target.value}））； }; 返回( 机密数：{secret.countSecrets} ); }

键入秘密时，react进入无限循环

我通过一篇博客文章阅读了这段代码，其中写道，在useffect中设置对象的状态会创建一个新对象，因此useffect的[]中的依赖关系 更改并导致无限循环

我的问题是，当我们键入并触发onchange时，同时更新状态，更新onchange中的状态是否不会创建新对象？创建新对象的情况是什么

---

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

React中的经验法则是状态对象是不可变的，不能直接更改它。所以，无论何时，只要你想更新状态，你总是要创建新的对象

查看您的代码，在

onChange

和

useffects

中都创建了新对象。但是

useffects

会在依赖项发生更改时创建无限循环，而onChange不会创建无限循环，因为状态更新不会再次

onChange

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

• 将依赖项数组从

  [secret]-->[secret.value]

• 或者将这两个值

  value，countSecrets

  作为两个不同的状态

---

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

它不会创建新对象。问题在于在JS中比较对象；两个对象永远不会相同，即使它们包含相同的键/值。阅读此答案：更新状态不会自动创建新对象，您有责任在每次状态更改时提供一个新对象以作出反应，这在所有上述情况下都是如此。但我正在更新状态，这也会创建新对象？根据您的答案，您想说，当触发onChange时，它创建新对象，然后新对象不会再次触发onChange。当在useEffect中创建对象时，每次都会触发useEffect，因为依赖关系随着新对象的创建而改变，等等。是的，绝对是。OnChange不会像useEffect那样再次触发，所以在OnChange的情况下您不会得到无限循环感谢您的努力并消除了我的疑虑：）

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