在 componentDidMount 中解决 Promise 后反应 setState

Question

我对 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 组件中，我调用此函数并在 Promise 解析后使用 then 设置状态。

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

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

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

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

Answer 1

您只需要等待数据到来，因为在这种情况下，渲染方法会在数据来自 api.

之前被调用

因此，如果状态为 null，则在渲染之前放置条件，然后渲染 null，否则 html

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

}

Answer 2

原因 getProjects return 空数组。试试这个

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);
    });
}

在 componentDidMount 中解决 Promise 后反应 setState

React setState after Promise resolves in componentDidMount

javascript

reactjs

es6-promise