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

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

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

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

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

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

Answer 2

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

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

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

}

Promise在componentDidMount中解析后反应setState

2 个答案: