如何改变对象的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

您只需要指定您使用的是personalData，您就沿着正确的路线前进了。

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，而不是在personalData中再次添加整个对象，这就是为什么您需要使用...testObject.personalData。