如何在 React 中更改其他对象中对象的 setState？

Question

我在 React 中创建了对象的状态，但我需要将另一个对象增加到相同的状态。 但是，我不能使用setState()属性，因为它会导致重新渲染（无限循环）。

我的状态：

const [testObject, setTestObject] = useState({
       id: 0,          
       telephone: 123,            
       personalData: {
            name: '',
            alias: '',
            gender: ''
        }
    })

错误：

Too many re-renders. React limits the number of renders to prevent an infinite loop.

我试图为它找到一个解决方案，但我无法解决它：

setTestObject({...testObject, personalData: {
        ...testObject, name: 'McDonnell DC-10'
    }})

我哪里错了？

Answer 1

你只需要指定你正在使用个人数据，你就在正确的路线上。

setTestObject({...testObject, personalData: {
        ...testObject.personalData, name: 'McDonnell DC-10'
    }})

您甚至可以使用旧状态作为参数以获得更好的性能。

setTestObject(testObject => { return {...testObject, personalData: {
        ...testObject.personalData, name: 'McDonnell DC-10'
    }}})

Answer 2

避免无限循环的方法是在useEffect()中添加代码，如下所示：

 useEffect(() => {
    setTestObject({
      ...testObject,
      personalData: {
        ...testObject.personalData,
        name: 'McDonnell DC-10',
      },
    });
  }, []);

另外我猜你想更新属性name而不是在个人数据中再次添加整个对象，这就是为什么你需要使用...testObject.personalData