我在运行应用程序时收到以下错误消息。
TypeError: Cannot read property 'map' of undefined
我正在将 Grid.js 导入到我的 Index.js 文件中，如下所示。我希望 Grid.js 显示在 Index.js 页面上，但是我收到一个类型错误：无法读取未定义错误的属性"map"。
网格.js
import React, { Component } from 'react';
import axios from 'axios';
class Grid extends React.Component {
state = {
posts: [],
isLoading: true,
errors: null
};
getPosts() {
axios
.get("http://localhost:1337/posts")
.then(response => {
this.setState({
posts: response.data.posts,
isLoading: false
});
})
.catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
this.getPosts();
}
render(){
const { isLoading, posts } = this.state;
return <div>
<div className="row">
{!isLoading ? (
posts.map(post => {
const { _id, title, content } = post;
return (
<div className="col-lg-2 col-md-3 col-sm-6 col-6" key={_id}>
<div className="list-item slick-item r list-hover mb-3">
<div className="media text-hover-primary">
<span className=" media-content"><i className="fas fa-images fa-4x text-muted"></i></span>
<div className="media-action media-action-overlay">
<div className="row">
<div className="w-100 text-center mt-2 h-1x">
Misc Meta Properties
</div>
<div className="w-100 text-center mt-4">
<a className="btn btn-sm btn-outline-light btn-rounded mx-3" href="{item.url}">View Type</a>
</div>
</div>
</div>
</div>
<div className="list-content text-center">
<div className="list-body">
<a className="list-title title" href="{item.url}">{title}</a>
<a className="list-subtitle d-block text-muted subtitle text-small ajax" href="{item.url}">Brand</a>
</div>
</div>
</div>
</div> );
})
) : (
<p>
</p>
)}
</div></div>
}
}
export default Grid;
索引.js (页数/索引.js)
import Header from '../components/Header'
import Grid from '../components/Grid'
import Welcome from '../components/Welcome'
import Footer from '../components/Footer'
import "../style.css"
const Index = () => (
<div>
<body className="bg-dark">
<Header></Header>
<Welcome></Welcome>
<div className="container">
<Grid/>
<Footer/>
</div>
</body>
</div>
)
export default Index
我成功地读取和显示数据，当使用NextJs的getInitialProps函数时。但是，我希望这个 API 位于一个我可以调用的漂亮组件文件中，而不是将其全部放在 Index.js 页面上，然后使用this.props.title等迭代它。
有什么想法吗？
编辑：
从控制台： [{"id"：1，"title"："test"，"content"："test"，"created_at"：1556521391304，"updated_at"：1556521391312}，{"id"：2，"title"："test"，"content"："test"，"created_at"：1556521394698，"updated_at">：1556521394702}]
从 API 直接 (Strapi)，浏览到 http://localhost:1337/posts/[{"id"：1，"title"："test"，"content"："test"，"created_at"：1556521391304，"updated_at"：1556521391312}，{"id"：2，"title"："test"，"content"："test"，"created_at"：1556521394698，"updated_at"：1556521394702}]
您没有从服务器响应中获得posts，或者您对此响应的处理不当。
如果您不想在服务器出现故障时出现"错误"，则可以从{!isLoading ? (交换为{(post && post.length) ? (。
在使用map函数之前，请确保你的数据应该返回数组，并且在map函数级别上喊不为空检查，例如
render(){
const { isLoading, posts } = this.state;
return <div>
<div className="row">
{!isLoading ? (
posts !=null&&posts.length>0&&posts.map(post => {
const { _id, title, content } = post;
return (
<div className="col-lg-2 col-md-3 col-sm-6 col-6" key={_id}>
<div className="list-item slick-item r list-hover mb-3">
<div className="media text-hover-primary">
<span className=" media-content"><i className="fas fa-images fa-4x text-muted"></i></span>
<div className="media-action media-action-overlay">
<div className="row">
<div className="w-100 text-center mt-2 h-1x">
Misc Meta Properties
</div>
<div className="w-100 text-center mt-4">
<a className="btn btn-sm btn-outline-light btn-rounded mx-3" href="{item.url}">View Type</a>
</div>
</div>
</div>
</div>
<div className="list-content text-center">
<div className="list-body">
<a className="list-title title" href="{item.url}">{title}</a>
<a className="list-subtitle d-block text-muted subtitle text-small ajax" href="{item.url}">Brand</a>
</div>
</div>
</div>
); }) ) : (
</p>
)}
</div></div>
}
在render()方法中，你使用了posts.map，第一次检查渲染方法时，反应中发生了什么，第一次帖子是一个空数组，所以在你的渲染方法中使用以下代码。
render(){
var { posts } = this.state;
var displayContent = !posts?[]:posts.map((data,index) => {
return {data.title}
})
在此使用主要返回方法编写HTML代码之后，只需在您想要的地方使用{displayContent}，这是一种简单的方法。
您指定的上述错误发生是因为 post[] 第一次为空。.所以使用上面的代码它可以工作...
当您有空时，请通过以下链接 反应生命周期方法.
生命周期方法
更新！isLoading ？(posts.map(代码与以下代码：
!isLoading && posts && Array.isArray(posts) ? posts.map(...) : ""
我假设你正在使用NextJS。这意味着在初始化页面加载时来自服务器而不是客户端。在nextjs中有一个方法调用getinitialprops，它获取任何数据并创建道具。