javascript - react - 当 Prop 改变时改变状态

Question

我有一个 React 组件，AttributeSingleChoice，我这样调用它:

基于我收到的新的props，我想改变它的状态，像这样:

componentWillReceiveProps: function() {
    var attributeTypes = this.selectAttributes();
    this.setState({
        singleChoiceAttributes: attributeTypes});
},

selectAttributes: function() {
    return this.props.classification.attributes.map(function (elem) {
        if(elem.attributeType == "A") {
            return {description: elem.description, name: elem.name}
        }
    }).filter(Boolean);
},

但是，如果我使用 componentWillReceiveProps，state.props 将记住旧的 props，而不是我希望的新的。

我尝试使用 componentWillUpdate 代替，但我无法在 componentWillUpdate 中设置状态。

如何根据新的 props 更改组件的状态？

Answer 1

componentWillReceiveProps hook将新 Prop 作为参数传递。

componentWillReceiveProps: function(newProps) {
  newProps !== this.props
}

您可以在 selectAttributes 函数上接受带有参数的替代 Prop 。

selectAttributes: function(props) {
  // fallback to regular props if nothing passed
  props = props || this.props;

  return props.classification.attributes.map(function (elem) {
    // ...
  }).filter(Boolean);
}

然后在有可用的新 Prop 时传递。

componentWillReceiveProps: function(newProps) {
  var attributeTypes = this.selectAttributes(newProps);

  this.setState({
    singleChoiceAttributes: attributeTypes
  });
}