Question

我有一个React组件John&#39;，我这样称呼它：

根据我收到的新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内设置状态。

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

Answer 1

componentWillReceiveProps hook将新道具作为参数传递。

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

您可以在selectAttributes功能上接受带参数的备用道具。

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

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

然后在新道具可用时传递它们。

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

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

Answer 2

您的componentwillrecieveprops标头不正确。你应该为nextProps接受一个参数，它将包含传入的props。然后根据nextProps设置你的状态变量。 http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

Answer 3

您需要将nextProps传递给您的函数：

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

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

React - 更改道具时更改状态

3 个答案: