不断出现错误 - Uncaught TypeError: Cannot read properties of undefined (reading \'map\')答案

【问题标题】：Getting constant error of - Uncaught TypeError: Cannot read properties of undefined (reading 'map')不断出现错误 - Uncaught TypeError: Cannot read properties of undefined (reading \'map\')
【发布时间】：2022-08-24 22:16:05
【问题描述】：

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

Uncaught TypeError: Cannot read properties of undefined (reading \'map\').

即使我写帖子？地图...它不起作用。请帮我解决一下这个。


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>
    </>
    
  );
}

嗨 Tanvesh，如果您的问题得到解决，请接受（通过单击下一步的检查按钮）您收到的第一个相关回复。这将指导未来的读者。

标签： javascript reactjs

【解决方案1】：

你的道具posts 是undefined。检查您传递给组件的值并确保这是一个数组。

【讨论】：

【解决方案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>
    </>
    
  );
}

【讨论】：

【解决方案3】：

例如，如果组件的使用者通过请求从 API 获取posts，就会发生这种情况。在获取数据时，posts 可能是 undefined，具体取决于您的实现方式。一个解决方案是与? (Optional Chaining Operator) 联系。像这样：

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>
    </>
    
  );
}

【讨论】：