React TypeError:this.state.projects.map不是函数

问题描述 投票:0回答:3
export default class Timeline extends Component{
state = {
    projects : [],
};

async componentDidMount(){
    const response = await api.get("/projects");

    this.setState({projects: response.data});
}

render(){
    return (
        <div className="timeline-wrapper">
           { this.state.projects.map(project => <h1>{project.name}</h1> )}
         </div>

    );       
}


}

此代码返回

TypeError:this.state.projects.map不是函数

为什么?这里有什么问题?

欣赏!

javascript reactjs
3个回答
0
投票

如果你正在使用axios,我会讨论...

const res = await axios.get(queryString);
  const arrayOfObjects = await res.data; // << what you use for map

0
投票

我昨天遇到了类似的问题,今天就解决了。我想在这里分享,希望它可以帮助你或其他人寻求解决这个问题。

我正在研究一个全栈应用程序,问题在于我的后端。

我返回响应的方式是错误的,因为它作为一个对象返回,它必须是一个数组,我想通过它进行映射。

Project.find({})
.then(projects=> {

//This is wrong:

res.json({projects: projects})

}
Project.find({})
.then(projects=> {

//This is correct:

res.json(projects)
}

这就是我必须改变的一切。祝好运。


0
投票

这里的问题是你的promise返回了一个空结果,这意味着response.data是未定义的。

调用set state后,将默认数组更改为undefined,这意味着无法映射this.state.projects,因为它不再是数组。

对我来说,没关系,因为您应该将默认状态设置为未定义并处理该情况。

您可以尝试更改代码,如下所示:

export default class Timeline extends Component {
  state = {
    projectsLoading: false,
    projects: undefined
  };

  componentDidMount() {
    this.setState({ projectsLoading: true }, async () => {
      const response = await api.get('/projects');
      this.setState({ projects: response.data, projectsLoading: false });
    });
  }

  renderProjects() {
    const { projects } = this.state;

    projects
      ? projects.map(project => <h1>{project.name}</h1>)
      : 'There are currently no projects to show';
  }

  render() {
    const { projectsLoading } = this.state;

    return (
      <div className="timeline-wrapper">
        {projectsLoading ? <Loader /> : this.renderProjects()}
      </div>
    );
  }
}

这将在从api获取数据时添加对加载的支持,如果返回的数据为空,则会返回错误消息,并处理未定义的情况。

© www.soinside.com 2019 - 2024. All rights reserved.