一个 setState 属性的更新会导致 reactjs 中的另一个属性自动更改

Question

我在父组件中有一个表格，在子组件中有一个表单字段。我将 onchange 函数作为道具传递，以接收父级子组件上更改的值并将值分配给 state 属性。但是，虽然特定 setState 属性的更改会自动导致另一个 setState 属性的更改。附上示例代码供参考。

 import React, { Component } from 'react';
    import _ from 'lodash';

    state = {
            activeLanguage: localStorage.selectedLanguage,
            obj1: {},
            obj2: []
        };

        componentDidMount = () => {
            this.setState({
                obj1: this.fetchUserDetails()[0],
                obj2: this.fetchUserDetails()

            });
        }

        fetchUserDetails = () => {
            const tempUserTable = [];
            const userInfo = {
                primaryAddress: {
                    addressLine1: 'Test',
                    addressLine2: 'Test',
                    city: 'Test'
                }
            };
            tempUserTable.push(userInfo);
            return tempUserTable;
        }

    handleChange = (value, path) => {
        const { obj1, obj2 } = this.state;
        console.log('Before set method:: ' + obj2);
        //obj1 primaryAddress.addressLine1 value changed from 'Test' to 'Testchange' after next line invoked
        _.set(obj1, path, value); 
        //obj2 primaryAddress.addressLine1 value changed from 'Test' to 'Testchange' automatically
        console.log('After set method:: ' + obj2); 
        this.setState({
            obj1
        });
    };

例如，我从 onChange 函数中的子组件接收值、路径，以使用 setState 更新 obj1。它会自动导致 obj2 发生变化。

示例值更改发生在运行时。

obj1 字段值的 addressLine1 从 'Test' 更改为 'Testchange' - (value='Testchange', path='primaryAddress.addressLine1') - onChange 在父级和 obj1 的 setState 中调用 调用。 obj2 字段值的 addressLine1 从 'Test' 更改为 'Testchange' - 这是自动发生的，无需为此 obj2 调用 setState。

任何帮助将不胜感激。如果需要进一步的信息，请告诉我。

Answer 1

我不确定您是如何在此示例代码之外获取数据的，但我猜这是因为您设置 obj1 和 obj2 的方式。 obj1 和 obj2[0] 实际上可能指向内存中的相同空间。与数字和字符串等基本类型不同，对象和数组在 JS 中被视为指针。

为了解决这个问题，我们需要将obj2[0] 克隆到它自己的值中。由于您已经在使用 Lodash，因此一种选择是使用他们的 clonedeep 方法。这样的事情可能会解决您的问题：

componentDidMount = () => {
  const data = this.fetchUserDetails();
  this.setState({
    obj1: _.clonedeep(data[0]),
    obj2: data
  });
}