Question

这种情况是，在安装组件之后，在事件侦听器中，我正在设置状态变量，而通过从后端进行rest调用来设置其他状态变量。

到目前为止，我所做的是使用componentWillUpdate并进行剩余调用并设置所有必需的状态。

我尝试使用componentWillUpdate方法来计算和设置其他状态变量。但是它多次重新渲染。我想我肯定在这里做错了。

export default class Person extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: this.props.name,
      age: "",
      country: ""
    };
  }

  componentDidMount() {
    this.setDerivedStates();
  }

  componentWillUpdate() {
    this.setDerivedStates();
  }

  attachListner() {
    document.addEventListner("customEvent", () => {
      this.setState({ name: something });
    });
  }

  setDerivedStates() {
    FetchService.get("url1" + this.state.name).then(response =>
      this.setState({ age: response.age})
    );
    FetchService.get("url2" + this.state.name).then(response =>
      this.setState({ country: response.country })
    );
  }

  render() {
    return (
      <div>
         <p>{this.state.name}</p>
         <p>{this.state.age}</p>
         <p>{this.state.country}</p>
      </div>
    );
  }
}

我想用所有新的状态变量重新渲染一次组件。请建议我该怎么做。哪种生命周期方法以及如何使用这些方法来设置所有这些状态？

Answer 1

您可以将两个提取都包装在Promise.all中，这将等待两个Promises都解决，如果失败，则您将无法访问任何成功解析的Promise/s，并且操作将抛出error。

添加componentDidUpdate来检查名称状态是否已更改（如果已重新获取）。

componentDidUpdate(prevProps, prevState) {
  if (prevState.name !== this.state.name) {
    this.setDerivedStates();
  } 
}

async setDerivedStates() {
  const url = `url${this.state.name}`;

  try {
    const [age, country] = await Promise.all([
      FetchService.getAge(url),
      FetchService.getCountry(url),
    ]);

    this.setState({ age, country });
  } catch (e) {
    console.log('something went wrong', e);
  }
}

Answer 2

您可以使用Promise.all批处理两次提取，因此您只需调用一次this.setState-

const [resp1, resp2] = await Promise.all([
        FetchService.get("url1" + this.state.name);
        FetchService.get("url2" + this.state.name);
      ]);

this.setState({ age: resp1.age, country: resp2.country });

此外，componentWillUpdate被认为是unsafe，将来会不推荐使用。我建议改用componentDidUpdate-

componentDidUpdate = (prevProps, prevState) => {
    if (prevState.name !== this.state.name) {
        this.setDerviedStates();
    }
}

在重新渲染时更新依赖于另一个状态变量的其他状态变量的更好方法是什么？

2 个答案: