在异步调用完成后呈现部分功能组件

Question

我正在使用带有反应功能组件的 material-ui 并使用其自动完成组件。我自定义了它，每当我更改输入字段中的文本时，我希望该组件呈现新的搜索结果。callAPI("xyz")我在操作中调用 API 并使用 xyz 参数，我正在从这个功能组件调用 dispatch 方法。这里的问题是，当组件进行调用时，它应该等待 API 响应然后呈现结果，但它得到了一个未解决的承诺，所以它无法呈现。<Paper square>    {callAPI("xyz").results.map(        result => console.log(result);    )}</Paper>由于结果是一个未解决的承诺，它将无法映射。我需要某种方法来仅在数据可用时调用地图，或者在数据存在之前显示一些文本，然后在获取数据后进行更改。任何纠正此代码的建议都将非常有帮助。

Answer 1

处理这个问题的最简单方法是使用三元表达式，也是在生命周期方法中调用 API 请求然后将结果保存在本地状态的最佳实践。

componentDidMount() {

    callAPI("xyz").results.map(

        result => this.setState(result);

}

<Paper square>

    {this.state.results ?

      this.state.results.map(

        result => console.log(result);

      : <p> Loading... </p>

    )}

</Paper>