Reactjs处理数组中更改子数据的更改

Question

有一个经典的句柄Change函数。我可以更改同一目录中的数据。没有问题。但我有子数据。我无法改变它们。我想在不在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')} />

在这种情况下；委任经纪人"；数据例如我想改变"；房间"；

Answer 1

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

推荐的方法是这样的：

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

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