Reactjs handleChange 与更改数组中的子数据答案

【问题标题】：Reactjs handleChange with Changing subdata in an arrayReactjs handleChange 与更改数组中的子数据
【发布时间】：2020-12-22 12:33:16
【问题描述】：

有一个经典的句柄更改功能。我可以更改同一目录中的数据。没有问题。但我有子数据。我无法改变它们。我想在不输入handlechange 中的额外函数的情况下将其处理为干净的。我该怎么做？

我的状态：

 this.state = {
            formData: {
                appointedBroker: '',
                propertyInformations: {
                    rent: false,
                    property: {
                        housing: false,
                    },
                    features: {
                        rooms: ""
                    },
                    location: ""
                },
            }
        }

我的handleChange函数：

 handleChange(event) {
        const { formData } = this.state;
        formData[event.target.name] = event.target.value;
        this.setState({ formData });
    }

和我的意见

        <TextField
            value={propertyInformations.features.rooms}
            onChange={(e) => this.handleChange(e)}
            id="rooms"
            name={'rooms'}
            type={'text'}
            label={t('Rooms')} />

在这种情况下，我只是更改了“指定经纪人”数据例如;我想换“房间”

【问题讨论】：

扁平化你的数据，去掉嵌套。

标签： javascript arrays json reactjs react-native

【解决方案1】：

在您的handleChange 函数中，您是directly mutating the state，这违背了React 模式。这样做会使更新未被检测到，例如 componentDidUpdate。

推荐的方式是这样的：

handleChange(event) {
       this.setState(prevState => ({
          formData: {
            ...prevState.formData ,
            [prevState.formData.propertyInformations.features.rooms]: e.target.value,
          },
         }));
    }

【讨论】：

【解决方案2】：

handleChange中的代码应该是这样的

const updatedFormData = {...this.state.formData,
   propertyInformations : {
       ...this.state.formData.propertyInformations,
       property: {
           ...this.state.formData.propertyInformations.property,
           rooms: e.target.value
}}}

this.setState({ formData: updatedFormData })

【讨论】：