Question

我通过读取XML文件来创建组件。 XML文件中的每个标记（例如<video src="intro.mp4" />）都将被解析并映射到其相同的命名组件Video。所有XML标签都是这种情况。

正因为如此：某些组件被重用并且将获得与以前完全不同的道具，因为它们从完全不同的标签获取属性。

例如，第1行有一个<video ... />标记，该标记映射到播放视频的Video组件。然后在某些时候视频停止。在某些情况下，在React卸载组件之前，已经读入了新的<video ... />标记，例如在第15行。

因此，我现在被迫通过componentWillReceiveProps重置此组件，因此，此处的代码看起来很像构造函数也具有的代码。

构造函数代码和componentWillReceiveProps代码之间的区别在于构造函数中的状态是直接变异的，而componentWillReceiveProps则不是。我的问题是，我想在一个函数中抽象出这个代码，我想在构造函数和componentWillReceiveProps中调用它。

所以我的问题是：我可以直接在setState(...)中直接在构造函数或变异状态中调用componentWillReceiveProps吗？

目前我的所有内容如下所示，重复：

//in the constructor
this.state = {
  key: shortid.generate(),
  localMediaItems: this.props.playlist.children.filter( element => {
    if(element.attributes && //.attributes property must exist
      element.attributes.stopAtSubjectId !== undefined){
      pubSub.publish('addGlobalMediaItem', element); //publish to Playlist
      this.state = {
        stopCounter: this.state.stopCounter + 1
      }
      return false;
    }
    return true;
  }) 
}


componentWillReceiveProps(nextProps){
//new XML tag has been read in, reset state as it were a new component mounting
  if(propsCompare(this.props, nextProps) === false){
    this.setState({
      key: shortid.generate(),
      localMediaItems: nextProps.playlist.children.filter( element => {
        if(element.attributes && //.attributes property must exist
          element.attributes.stopAtSubjectId !== undefined){
            pubSub.publish('addGlobalMediaItem', element); //publish to Playlist
            return false;
        }
        return true;
      })
    });
  }
}

React：为什么不直接在componentWillReceiveProps中改变this.state？或者在构造函数中调用setState

0 个答案: