Question

我正在尝试将我的React版本从react 15升级到16，因此在这样做的同时面临getDerivedStateFromProps中的一个挑战。在 ComponentWillReceiveProps 中，

componentWillReceiveProps(nextProps) {

  if (nextProps.postDetails !== []) {
    this.setState({
      postDetails: nextProps.postDetails
    });
  }

  if (nextProps.userData.length === 2) {
    this.setState({
      userData: nextProps.userData
    });
  }
}

// in the above am checking two different props and setting the value accordingly

在 getDerivedStateFromProps 中，

static getDerivedStateFromProps(props, prevState) {
    if (prevState.value !== props.value) {
      return {
        value: props.value
      }
    }
  }
  //here the problem is ,am unable to do multiple props validations here

我的问题是，就像我在componentWillReceiveProps中所做的那样，如何在getderivedstatefromprops中进行多个道具验证。有人可以澄清一下吗。

我在下面这样尝试过，但是如果没有，它就不会出现在下一个！

let xx = true;
let yy = true;
if (xx) {
  console.log("if 1");
  return {
    value: nextProps.someValues,
  };
}
if (yy) {
  console.log("if 2");
  return {
    value2: nextProps.someValues2,
  };
}

预计会出现两个控制台日志，但如果仅控制台，则将获得第一！！

Answer 1

只使用中间变量来堆叠更改

getDerivedStateFromProps(props, state) {
    let update = {};

    if (props.postDetails !== []) {
        update.postDetails = props.postDetails;
    }

    if (props.userData && props.userData.length === 2) {
      update.userData = props.userData;
    }

    return update;
}

React JS中的getDerivedStateFromProps中的多个道具验证

1 个答案: