Question

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不是函数

为什么？这是什么问题？

赞赏！

Answer 1

如果您是我故意使用axios。

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

Answer 2

昨天我遇到了类似的问题，今天又解决了。我想在这里分享它，希望它可以帮助您或其他希望解决此问题的人。

我当时正在使用全栈应用程序，问题出在我的后端。

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

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

//This is wrong:

res.json({projects: projects})

}

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

//This is correct:

res.json(projects)
}

这就是我要做的一切。祝好运。

Answer 3

这里的问题是您的诺言返回了空结果，这意味着 response.data 未定义。

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

对我来说，这还可以，因为您可能应该将默认状态设置为undefined并处理这种情况。

您可以尝试更改代码，如下所示：

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提取数据时的加载支持，如果返回的数据为空，则会显示一条错误消息，并处理未定义的情况。

反应TypeError：this.state.projects.map不是函数

3 个答案: