英文:
How to access the Array field in the Json Object?
问题
在你的组件中，你正在尝试访问 friendJson 对象中的 friends 数组并进行遍历，但遇到了一个错误，提示无法读取未定义的属性 map。这是因为 friendJson 对象是一个数组，而不是一个包含 friends 属性的对象。你需要先访问数组的元素，然后再遍历其中的 friends 属性。以下是修复错误的代码片段：
{
// console.log(friendJson.friends)
friendJson[0].friends.map((eachFriend) => {
return <FriendItem key={eachFriend} friend={eachFriend}/>
})
}
通过使用 friendJson[0]，你访问了数组中的第一个对象，然后再遍历其 friends 属性。这应该会解决你遇到的错误。
英文:
So I have a Json object FriendJson and in it I have a array field friends.
Json Object:
[
{
"id": 4,
"updated": "2023-01-07T22:06:23.929206Z",
"created": "2023-01-07T19:49:49.303182Z",
"user": 35,
"friends": [
36,
37,
38,
39
]
}
]
The question is how to access friends array and traverse it. I am using react so I need to use map() for traversal. I am trying this in return part of a Functional component, so can use much functionalities of Javascript.
My component:
import React, {useContext, useEffect, useRef, useState} from 'react'
import { useNavigate } from 'react-router-dom';
import AlertContext from '../context/Alerts/AlertContext';
import FriendContext from '../context/Friends/FriendContext';
import FriendItem from './FriendItem'
export default function YourFriends() {
const {friendJson, getFriends, addFriend, getUserId, getReceiverId} = useContext(FriendContext)
const {showAlert} = useContext(AlertContext)
const navigate = useNavigate()
useEffect (() => {
if(localStorage.getItem('authToken')) {
getFriends()
}
else navigate('/signin')
})
return (
<>
<div className="container">
<h2 className="text-center">Your Friends</h2>
{
friendJson.length === 0 && <div className="text-conter">You don't have any friends</div>
}
{
// console.log(friendJson.friends)
friendJson.friends.map((eachFriend) => {
return <FriendItem key={eachFriend} friend={eachFriend}/>
})
}
</div>
</>
)
}
I tried in this way:
friendJson.friends.map((eachFriend) => {
return <FriendItem key={eachFriend} friend={eachFriend}/>
})
But it throws error as:
TypeError: Cannot read properties of undefined (reading 'map')
And when I console.log(FriendJons.friends) the result is undefined.
答案1
得分: 2
如果你的 FriendJson 是一个数组，你应该通过以下方式访问朋友列表：
FriendJson[0].friends
而不是：
FriendJson.friends
潜在地，你可以迭代 FriendJson，并在其中的任何元素中获取 friends：
friendJson.map((element) => {
return element.friends.map((eachFriend) => {
return <FriendItem key={eachFriend} friend={eachFriend}/>
})
})
一般来说，处理像 "Cannot read properties of undefined (reading 'map')" 这样的错误的通用规则是打印具有你需要读取 "map" 的属性的对象，在你的情况下，如果这个解决方案不起作用，那么请检查 friendJson 是什么。
英文:
If your FriendJson is an array you should go to friends by
FriendJson[0].friends
rather than
FriendJson.friends
potentially you can iterate ofer FriendJson and in any of his elements get friends.
friendJson.map((element) => {
return element.friends.map((eachFriend) => {
return <FriendItem key={eachFriend} friend={eachFriend}/>
})
})
general rule for errors like "Cannot read properties of undefined (reading 'map')"
is print object having property on which you need to read "map" in your case if this solution will not work then check what is friendJson.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论