Question

如何使用setState在反应状态下更改数组中对象的值？

我的反应状态：

this.state = {
    serviceFees: [
        {
        periodFrom: new Date(),
        periodTo: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
        serviceFeeType: 'percentage',
        serviceFee: '',
        refundableStatus: 'refundable'
        }
    ]
};

还有我的一些onChange功能：

handlePeriodFromDateChange = (date) => {
    this.setState({
        periodFrom: date,
        periodTo: new Date(date.getTime() + 24 * 60 * 60 * 1000)
    });
}

handleRefundableStatus = (e) => {
    this.setState({
        refundableStatus: e.target.value
    })
}

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}

Answer 1

在这里您做错了。您不能直接写属性名称和值，而不必告诉您要更新哪个索引。

如果您要更新例如数组的第一个索引的对象属性，则必须执行以下操作：

handlePeriodFromDateChange = (date) => {
    consr 
    this.setState({
       serviceFees: this.state.serviceFees.map((e,i)=>{
          if(i === 0) {
            return {
              ...e, 
              periodFrom: date,
              periodTo: new Date(date.getTime() + 24 * 60 * 60 * 1000)
            }
          }
          return e;
       }})
    });
}

您必须同时更改数组和要更新的数组内对象的引用。要更改数组的引用，请使用map方法，该方法将返回一个新数组。

如何在反应状态的数组对象中设置状态？

1 个答案: