ReactJS更改状态错误的数组项：无法分配为对象的只读属性

Question

我有一个ReactJS事件处理程序，该处理程序需要更改一个数组项，其中数组以组件状态存储。我的代码：

handleColumnResize = (index, width) => {
    let formData = Object.assign({}, this.state.formData);
    let columns = Object.assign({}, this.state.formData.columns);

    columns[index].width = width;

    formData.columns = columns;

    this.setState({
        formData: formData
    });

    if (this.props.onDataChange) this.props.onDataChange(formData);
};

我遇到以下错误：

TypeError: Cannot assign to read only property 'width' of object '#<Object>'

在此行：columns[index].width = width;

更改状态数组项内容的正确方法是什么？

OBS：我的问题与this post不同，因为如果涉及到更改特定数组项，则不将其添加到新数组中。

Answer 1

检查this.state.formData.columns。您有指向this.state.formData.columns的列。出现此问题的原因是您想更改this.state.formData.columns中的某些属性。您应该像这样调试器：

Object.getOwnPropertyDescriptor(columns[index],width) 

并检查可写属性。