如何在 React 中映射嵌套的 JSON 响应

Question

我必须在 React 中映射嵌套的 JSON 结果。下面是我从后端 API 得到的响应。

{
"id": 2,
"name": "sanjna",
"email": "vv@gmail.com",
"address": "iiiii, hhh",
"gender": "1",
"tagline": "Friendly to all",
"description": "4 years experience in programming",
"languages": "English ",
"key_skills": [
    {
        "id": 1,
        "name": "RUBY ON RAILS, HTML, BOOTSTRAP, JQUERY, REACT",
        "relevant_experience": "4"
    },
    {
        "id": 2,
        "name": "ruby",
        "relevant_experience": "2"
    }
],
"certifications": [
    {
        "id": 1,
        "name": "MCA",
        "institution_name": "vvv unversity",
        "certification_date": "20-12-2020",
        "image": null
    },
    {
        "id": 2,
        "name": "HTML training",
        "institution_name": "nnn unversity",
        "certification_date": "20-12-2022",
        "image": null
    }
],
"educations": [
    {
        "id": 1,
        "qualification": "MCA",
        "course": "Masters Degree PG",
        "institute": "kkk",
        "ins_location": "jjjj",
        "passing_year": "2015"
    }
]
}

这是我获取此响应的 React 代码

    const [singleUserDetail, setsingleUserDetail] = React.useState('');
let logged_user_id = job_seeker.actable_id;
    const getsingleUserDetails = (logged_user_id) => {
    axios
        .get(`http://localhost:3001/users/${logged_user_id}`, { withCredentials: true })
        .then((response) => {
          const singleUserDetail = response.data;
          setsingleUserDetail(response.data)
           console.log(response.data); //prints the above JSON results in console
        })
        .catch((error) => {
            console.log(" error", error);
        });
};
  React.useEffect(() => {
    getsingleUserDetails(logged_user_id);
  }, [logged_user_id]);

当我打印 {singleUserDetail.name} 时，它会给我结果 sanjna {singleUserDetail.email} 它给了我结果vvv@gmail.com {singleUserDetail. address} 它给了我结果iiiii, hhh。从我上面的 JSON 结果

但是如何在此处使用映射打印关键技能、认证和教育。我是 React 的初学者。

Answer 1

你可以做这样的事情，我的例子很简单，但你可以根据需要将其复杂化，在循环中使用条件或循环。

<div>
  {singleUserDetail.name},{singleUserDetail.email},{singleUserDetail.address},{singleUserDetail.gender},{singleUserDetail.tagline},{singleUserDetail.description}, {singleUserDetail.languages}
</div>

{singleUserDetail.key_skills.map((skill)=>{
  return(
    <div key={skill.id}>
      {skill.name}:{skill.relevant_experience}
    </div>
  );
})}

{singleUserDetail.certifications.map((certification)=>{
  return(
    <div key={certification.id}>
      {certification.name},{certification.institution_name},{certification.certification_date}
    </div>
  );
})}

{singleUserDetail.educations.map((education)=>{
  return(
    <div key={education.id}>
      {education.qualification},{education.course},{education.institute}
    </div>
  );
})}

欲了解更多信息，React documentation