Question

获取持续错误 - 未捕获的类型错误：无法读取未定义的属性（读取‘map’）

2022-03-08

1405

javascript reactjs

这是我项目中我的组件之一，名为 posts.jsx 它显示了从组件中收到的所有帖子，但是一旦我渲染组件，页面就会空白：

086367698

即使我写帖子？地图...它不起作用。请帮助我。

708629871

Answer 1

您的 prop posts 是 undefined 。请检查您传递给组件的值，并确保这是一个数组。

Georgy

2022-03-08

Answer 2

问题是您导入了 Post ，其中的 P 是大写的，而您正尝试映射 post ，其中的 p 是小写的使用此代码进行更正

import Post from "../post/Post";
import "./posts.css";

export default function Posts({posts}) {
  return (
    <>
      <div className="posts">
          
          {Posts.map((p) =>{
            {console.log(p)}
            <Post post = {p} />
          })}
      </div>
    </>
    
  );
}

Answer 3

例如，如果组件使用者通过请求从 API 获取 posts ，就会发生这种情况。在获取数据时， posts 可能 未定义 ，具体取决于您如何实现它。一种解决方案是使用 ? ( 可选链接运算符 ) 进行检查。如下所示：

import Post from "../post/Post";
import "./posts.css";

export default function Posts({posts}) {
  return (
    <>
      <div className="posts">
          
          {posts?.map((p) =>{
            {console.log(p)}
            <Post post = {p} />
          })}
      </div>
    </>
    
  );
}

如果您仍然收到错误，则意味着 posts 不是数组，请确保在定义它时它是一个数组，更改它，并将其传递给组件时也一样。