Question

所以我有以下...

constructor(props) {
    super(props);
    this.props.getCurrentProfile();
         this.state = {
              city:
                this.props.profile.location.city !== ""
                  ? this.props.profile.location.city
                  : "",
              country: "",
              zipcode: "",
    ...

这些属性取决于this.props.getCurrentProfile()。有没有办法在this.state之后执行getCurrentProfile，因为这是异步进行的？我也知道条件渲染

this.props.profile.location.city !== ""
          ? this.props.profile.location.city
          : "",

可能无法正常工作，我只是想看看是否可行。我知道还有其他事情要做，只是想尝试一下。但是我需要先加载我的配置文件才能对其进行测试。因为这是因为它在Redux加载到新状态之前设置了状态，所以返回为undefined。

Answer 1

自componentWillReceiveProps起已弃用，我建议您使用static getDerivedStateFromProps。

我建议您在getDerivedStateFromProps中执行setState之前先比较两个对象。如果两个对象不相等，则执行setState，否则将陷入无限setState循环警告。您应该始终将当前的道具与以前的道具进行比较，如果它们不相等，则只进行setState。因此，为了比较两个对象，我建议您使用下划线模块进行深度相等性检查。请在下面查看我更新的答案

constructor(props) {
  super(props);
  this.props.getCurrentProfile();

  this.state = {
          city: "",
          country: "",
          zipcode: "",
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if(!_.isEqual(this.props.profile, nextProps.profile)) {
      return ({ city: nextProps.profile.location.city }) // <- this is setState equivalent
    }
    return null;
  }

Answer 2

constructor(props) {
  super(props);
  this.props.getCurrentProfile();

  this.state = {
          city: "",
          country: "",
          zipcode: "",
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.profile) {
      this.setState({ city: nextProps.profile.location.city })
    }
  }

一旦调用动作getCurrentProfile并返回值，componentWillReceiveProps将收到新的道具profile，因此componentWillReceiveProps中的setState

构造函数中的this.state同步调用函数

2 个答案: