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

Question

场景是，安装组件后，在事件监听器中我设置一个状态变量，并通过从后端进行休息调用来设置其他状态变量。

到目前为止，我所做的是使用 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 来批处理两次提取，这样您只需调用 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();
    }
}