ReactJS handleChange与更改数组中的子数据

问题描述

有一个经典的句柄更改功能。我可以在同一目录中更改数据。没有问题。但是我有子数据。我不能改变他们。我想将此处理干净，而无需在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')} />

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

解决方法

在handleChange函数中，您是directly mutating the state，与React模式相反。这样做会导致componentDidUpdate无法检测到更新。

推荐的方法应与此类似：

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

,

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 })