如何在继续代码之前等待axios调用完成[重复]

Question

我必须使用axios提出请求，以便获取一些数据，这些数据应该作为道具传递给React组件。下面是我的渲染函数：

render() {
    boards = this.fetchBoardList();

return (
    <div className="app-wrapper">
        // Some HTML code
    </div>
);
}

FateChBoardList是一个异步函数，因此它将返回一个promise。我可以将然后和捕获处理程序附加到返回promise，但在这种情况下，我必须在两个处理程序中放入相同的超文本标记语言代码。还有别的办法吗？

Answer 1

React代码片段存在多个问题。

• board变量不应该是全局的。您可能希望将数据存储在state中，例如使用useState钩子。
• 我假设您想在组件挂载时获取数据，为此，您应该使用use效应钩子（依赖于板）
• 你在jsx中使用class，这是无效的。您应该使用class Name。

前两点仅适用于功能部件。如果要使用类组件：

• 在构造函数中创建初始状态。添加一个componentDidMount函数，在该函数中等待fetch函数调用，并使用结果数据调用this.setState