Reactjs 反应状态无限重渲染器

这样一个简单的代码片段会导致无限循环。如果这种方法显然不起作用，我如何使用道具来决定是否应该更新状态

import React from "react";

export default function Igor_test(props) {

  const { update_name } = props;
  const [values, setValues] = React.useState({
    name: 'Joe',
    age: 15,
  });

  if (update_name) {
    setValues(oldValues =>({
      ...oldValues,
      [values.name]: 'Pat',
    }))
  }

  return(
    <div>
      <p>
        {values.name}
      </p>
    </div>
  )

}

错误：重新渲染过多。React将渲染数量限制为 防止无限循环

---

您可以将所有逻辑放在useEffect挂钩中，以控制何时更新状态 请注意，每次更新名称更改时，此函数都将重新加载

---

错误是因为您的if条件

if (update_name) {
    setValues(oldValues =>({
      ...oldValues,
      [values.name]: 'Pat',
    }))
}

在这里，如果条件是设置状态，则组件将重新渲染。当您的组件重新呈现时，它将再次检查if条件，并找到update_name的值，再次设置state等等

这导致了无限循环

setValues中还有一个问题，您试图设置[values.name]，这是错误的，它应该只是名称

您需要的是带有依赖关系数组的useEffect挂钩，它将跟踪提供的参数，并在参数更改时作出反应

现在，每当update_name更改时，它都会检查它是否有值并相应地设置状态

React.useEffect(() => {
  if (update_name) {
    setValues(oldValues =>({
      ...oldValues,
      name: 'Pat',     //ideally instead of hard coding new name you should use `update_name` passed as props.
    }))
  }
},[update_name])

---

问题是“update_name”每次返回什么。因为如果它总是有一个真实的值，那么你会得到一个无限循环，因为你触发了setValues，这会导致一个rerenderAlso[values.name]：“Pat”看起来很可疑。update_name，实际上要么是null，要么是对象-如果是对象，我想更新一次状态。与基于类的组件的方法非常相似，似乎工作得相当好。嗨，Bishonen_PL，检查我的解决方案，并让我知道这是否有帮助。

React.useEffect(() => {
  if (update_name) {
    setValues(oldValues =>({
      ...oldValues,
      name: 'Pat',     //ideally instead of hard coding new name you should use `update_name` passed as props.
    }))
  }
},[update_name])