浏览器错误说“无法添加属性 *，对象不可扩展” - 即使类定义中确实存在属性答案

【问题标题】：Browser error says "Cannot add property *, object is not extensible" - Even though property does exist in the class definition浏览器错误说“无法添加属性 *，对象不可扩展” - 即使类定义中确实存在属性
【发布时间】：2018-11-12 14:53:21
【问题描述】：

我使用带有 Sails.js 后端的 React。我认为这个问题真的只与 React/javascript 有关。

即使对象中确实存在正在更改的属性，我也会收到以下浏览器控制台错误：

Cannot add property *, object is not extensible

下面是类定义和使用中出现的错误：

onExchangeSelect={selectedExchange => this.setState({selectedExchange})

在下面的渲染函数中。也就是说，浏览器抱怨该对象不可扩展并将该行作为原因（当我删除 onExchangeSelect 函数时，错误消失了）。

class ExchangeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      exchanges:[
        {
          name:"binance",
          url:"https://bittrex.com"
        },
        {
          name:"bittrex",
          url:"https://bittrex.com"
        }
      ],
      selectedExchange:null
    };

  }

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList
            exchanges={this.state.exchanges} selected={this.state.selectedExchange}
            onExchangeSelect={selectedExchange => this.setState({selectedExchange}) }
        />
        <ExchangeDetail exchange={this.state.selectedExchange} />
      </div>
    );
  }
}

我的问题是，什么可能导致 React 组件呈现错误和后续失败？为什么我不能更改该属性？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

尝试传播/复制对象（否则，它只是使用相同的内存位置）。

onExchangeSelect={selectedExchange => 
     this.setState({
        selectedExchange: {...selectedExchange}
     })
 }

【讨论】：

同样的结果。我在上面使用了你的语法。
那么，分享onExchangeSelect方法的细节。
我相信这一行：onExchangeSelect={selectedExchange => this.setState({selectedExchange}) } 意味着 onExchangeSelect 是由它旁边的东西定义的函数，它在其中设置状态。然后将该函数传递给 ExchangeList React 组件（然后将其传递给另一个组件进行回调），但要回答您的问题，我相信定义包括：{selectedExchange => this.setState({selectedExchange}) } 但我对 javascript、React 和 ES6 非常陌生。
exchanges 的数组是否包含简单对象？还是深层对象（深层意味着嵌套对象）？
交换数组在上面的构造函数中被硬编码：this.state = { exchange:[..