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不是函数
为什么?这里有什么问题?
欣赏!
如果你正在使用axios,我会讨论...
const res = await axios.get(queryString);
const arrayOfObjects = await res.data; // << what you use for map
我昨天遇到了类似的问题,今天就解决了。我想在这里分享,希望它可以帮助你或其他人寻求解决这个问题。
我正在研究一个全栈应用程序,问题在于我的后端。
我返回响应的方式是错误的,因为它作为一个对象返回,它必须是一个数组,我想通过它进行映射。
Project.find({})
.then(projects=> {
//This is wrong:
res.json({projects: projects})
}
Project.find({})
.then(projects=> {
//This is correct:
res.json(projects)
}
这就是我必须改变的一切。祝好运。
这里的问题是你的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获取数据时添加对加载的支持,如果返回的数据为空,则会返回错误消息,并处理未定义的情况。