Question

我正在与ReactJS合作，我遇到了一些我不知道如何解决的问题。

所以，我有一个组件，它将一个对象数组作为道具。在构造函数中，我想修改此数组以将修改后的版本设置为状态。

constructor(props) {
    super(props);

    const myData = this.processData(data);
    this.state = {
      myData
    };
  }

  static propTypes() {
    return {
      myData: React.PropTypes.array.isRequired
    };
  }

语句const myData = this.processData(data);之后如果我在控制台中显示props.myData，它就会显示已修改的数据，而不是原始的道具数据！

我在this discussion中读到我应该有一个克隆数组，这样原来的数组就不会发生变异。

所以在此之后代码看起来有点像

constructor(props) {
    super(props);

    const myData = props.myData;
    const processedData = this.processData(myData);
    this.state = {
       processedData
    };
  }

但是新属性即将到来，我正在componentWillReceiveProps()抓住它们 - nextProps已经格式化了！

我很感激任何帮助，请指教！

Answer 1

问题是你并没有真正通过编写const myData = props.myData;来复制数组。您只是将其引用复制到一个新变量。

您可以使用Array.slice()制作这样的副本：

constructor(props) {
    super(props);

    const processedData = this.processData(props.myData.slice());
    this.state = {
       processedData
    };
  }
}

在组件

1 个答案: