嵌套数组对象属性 return react redux 中的未定义类型错误

Question

我想在前端显示 post 细节。我的 api 显示 post 详细信息，如下所示 postman:

"message": "Posts fetched successfully!",
    "posts": {
        "_id": "61f05f676793d49f466e7aaa",
        "title": "Liberal Arts Student Sample",
        "content": "The three-page.",
        "creator": {
            "_id": "61cd99efa0b8d616a7a53ce1",
            "createdAt": "2021-12-30T11:37:19.041Z",
            "updatedAt": "2022-01-06T14:35:48.801Z",
            "__v": 0,
            "bio": "user bio",
            "name": "username"
        },
        "Comments": [],
        "created": "2022-01-25T20:36:55.095Z",
        "createdAt": "2022-01-25T20:36:55.096Z",
        "updatedAt": "2022-01-25T20:36:55.096Z",
        "__v": 0
    }
}

我想在前端展示这个 post 细节，这里是代码：

export default function PostDetail() {
    const { postId } = useParams();
    const post = useSelector((state) => state.post)
    const dispatch = useDispatch();
    const { title, content,creator, created } = post;
    const fetchPostDetail = async (id) => {
        const response = await axios.get(`http://localhost:5000/api/articles/post/${id}`, { post })
            .catch(err => {
                console.log(err);
            })
        dispatch(selectedPost(response.data.posts));
              }

    useEffect(() => {
        fetchPostDetail(postId)
    }, [])


    return (
        <div>
            <h1>Post Detail</h1>
            <div>
                <h2>{title}</h2>
                <i>posted in {created}</i>
                 <li>Created by {creator.map((m,i)=>(
<b key={i}>{m.name}</b>
                 ))}</li> 
                <p>{content}</p>
            </div>
        </div>
    );
}

存在三个错误：

未捕获类型错误：创建者未定义
组件出现以上错误：
未捕获类型错误：创建者未定义

如果我静音

创建者{creator.map((m,i)=>( {m.name} ))}

然后它显示 post 没有 post 作者姓名的详细信息。但我想显示作者姓名。

我该如何解决？提前谢谢你

Answer 1

这里，creator是一个Object。而 .map 函数用于数组。要映射对象，您可以检查： map function for objects (instead of arrays)

Answer 2

您已经为您的对象提供了创建者，

"creator": {
  "_id": "61cd99efa0b8d616a7a53ce1",
  "createdAt": "2021-12-30T11:37:19.041Z",
  "updatedAt": "2022-01-06T14:35:48.801Z",
  "__v": 0,
  "bio": "user bio",
  "name": "username"
},

map 方法仅适用于数组。但是在这里您使用了 with Object

<div>
   <h1>Post Detail</h1>
   <div>
     <h2>{title}</h2>
     <i>posted in {created}</i>
     <li>Created by {creator.map((m,i)=>(
         <b key={i}>{m.name}</b>
         ))}
     </li> 
     <p>{content}</p>
    </div>
</div>

您可以将您的代码替换为

<div>
  <h1>Post Detail</h1>
  <div>
    <h2>{title}</h2>
    <i>posted in {created}</i>
    <li><b>Created by {creator.name}</b></li> 
    <p>{content}</p>
  </div>
</div>

Answer 3

确保 post 对象包含“创建者”键，如果状态看起来与 API 响应完全一样，则不需要 map() 。如果您能展示状态的外观，将会揭示更多问题。

Answer 4

组件第一次挂载时，创建者的值是未定义的。您需要在获取嵌套值之前添加检查。

<div>
  <h1>Post Detail </h1>
  <div>
    <h2>{title} </h2>
    <i> posted in {created} </i>
    {creator && <li> Created by :{creator.name}</li>}
    <p> {content} </p>
  </div>
</div>

注意：还有一点，Creator 不是一个数组。它是一个对象。所以你不能映射对象。如果它是一个数组，你也必须在这种情况下进行上述检查。

嵌套数组对象属性 return react redux 中的未定义类型错误

nested array object property return undefined typeError in react redux

javascript

arrays

reactjs

react-redux

use-effect

嵌套数组对象 属性 return react redux 中的未定义类型错误

nested array object property return undefined typeError in react redux

javascript

arrays

reactjs

react-redux

use-effect

嵌套数组对象属性 return react redux 中的未定义类型错误