在 Promise 在 componentDidMount 中解析后反应 setState答案

【问题标题】：React setState after Promise resolves in componentDidMount在 Promise 在 componentDidMount 中解析后反应 setState
【发布时间】：2019-07-23 05:58:49
【问题描述】：

我对 React 还是很陌生，并试图把我的脑袋转过来。

我正在从ProjectAPI.js 文件中的 API 获取一些数据。

const getProjects = async () => {
    const projectsAPI = Common.baseApiUrl + '/project';
    let projects = [];
    axios.get(projectsAPI)
    .then((response) => {
        for (let i = 0; i < response.data.length; i ++){
            let project = {
                projectNameInitials: "NO",
                projectNumber: response.data[i].projectNumber,
                projectName: response.data[i].projectName,
                clientName: response.data[i].client,
                currentStage: response.data[i].currentStage,
                lastUpdated: response.data[i].updatedOn
            }
            projects.push(project);
        }
    })
    .catch((error) => {
        console.log(error);
    });
    return projects;
}

然后，在我的 React 组件中，我调用此函数并使用 then 设置 Promise 解析后的状态。

componentDidMount(){
    ProjectAPI.getProjects().then((response) => this.setState({projects: response}));
}

我尝试从 render() 函数中的 state 检索相同的内容。

render(){
    const {
        projects,
      } = this.state;
    //...
}

这不起作用，我在 render() 函数中得到 projects 作为空数组。但是，使用 React 开发工具，我可以看到状态具有准确的数据。有趣的是，当我使用 React 开发工具手动修改其中一个状态值时，render() 能够检索状态数据，因为它再次触发了render()。知道我在这里做错了什么吗？

【问题讨论】：

项目将在承诺解决之前首先返回。然后尝试 async-await。

标签： javascript reactjs es6-promise

【解决方案1】：

导致getProjects 返回空数组。试试这个

const getProjects = () => {
    const projectsAPI = Common.baseApiUrl + '/project';
    let projects = [];
    return axios.get(projectsAPI)
    .then((response) => {
        for (let i = 0; i < response.data.length; i ++){
            let project = {
                projectNameInitials: "NO",
                projectNumber: response.data[i].projectNumber,
                projectName: response.data[i].projectName,
                clientName: response.data[i].client,
                currentStage: response.data[i].currentStage,
                lastUpdated: response.data[i].updatedOn
            }
            projects.push(project);
        }
        return projects
    })
    .catch((error) => {
        console.log(error);
    });
}

【讨论】：

如果您对此进行更多解释，我会接受这个答案，以便帮助其他人。
你也可以 setState 里面的axios.get(projectsAPI) .then((response) =>{ this.setState({}) }) .catch((error) => { console.log(error); });
因为您在异步获取请求 Common.baseApiUrl + '/project' 完成之前返回 projects。所以你得到空数组而不是data

【解决方案2】：

您只需要等待数据到来，因为在这种情况下，渲染方法会在您的数据来自 api 之前被调用。

所以只要在渲染之前设置条件，如果状态为 null 然后渲染 null 否则你的 html

render(){
const {
    projects,
  } = this.state;
{projects && 'your code' }

}

【讨论】：