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

Question

我正在使用带有反应功能组件的 material-ui 并使用其自动完成组件。我自定义了它，每当我更改输入字段中的文本时，我希望该组件呈现新的搜索结果。

callAPI("xyz")

我在操作中调用 API 并使用 xyz 参数，我正在从这个功能组件调用 dispatch 方法。

这里的问题是，当组件进行调用时，它应该等待 API 响应然后呈现结果，但它得到了一个未解决的承诺，所以它无法呈现。

<Paper square>

    {callAPI("xyz").results.map(

        result => console.log(result);

    )}

</Paper>

由于结果是一个未解决的承诺，它将无法映射。我需要某种方法来仅在数据可用时调用地图，或者在数据存在之前显示一些文本，然后在获取数据后进行更改。

任何纠正此代码的建议都将非常有帮助。

Answer 1

处理这个问题的最简单方法是使用三元表达式，也是在生命周期方法中调用 API 请求然后将结果保存在本地状态的最佳实践。componentDidMount() {&nbsp; &nbsp; callAPI("xyz").results.map(&nbsp; &nbsp; &nbsp; &nbsp; result => this.setState(result);}<Paper square>&nbsp; &nbsp; {this.state.results ?&nbsp; &nbsp; &nbsp; this.state.results.map(&nbsp; &nbsp; &nbsp; &nbsp; result => console.log(result);&nbsp; &nbsp; &nbsp; : <p> Loading... </p>&nbsp; &nbsp; )}</Paper>