显示嵌套的 Json 数组获取的数据 React native

Question

所以我是反应原生的新手，我试图显示 Json 获取数据的嵌套元素，但我不知道该怎么做。在 fetch api 中使用 react hooks 后：

export default function MedProfilScreen({ route }) {

  //const {id,name,specialite,work}=route.params;

  const [data, setData] = useState([]);

  useEffect(() => {

    fetch("http:......")

      .then(response => response.json())

      .then(res => {

        setData(

          res);

        console.log(res);

      })

      .done();

  },[]);

}

我得到了这个回复：

Array [

  Object {

    "code": "12459552",

    "id": 7,

    "name": "Dr xavier vilan",

    "speciality": "Cardio",

  },

  Object {

    "education": Array [

      Object {

        "date_debut": "2020-02-07",

        "date_end": "2020-02-06",

        "diploma": "asmaa",

        "school": "asmaa",

        "city": "vullez",

      },

      ]}

]

所以我想显示例如：姓名：xavier 博士.. 文凭：asmaa

return(

<View>  name: Dr xavier.. diploma: asmaa            </View>

)

任何人都知道该怎么做。谢谢

Answer 1

我不知道这就是你要找的东西，但我会试一试：代码：const renderText = () => {&nbsp; &nbsp; // as soon as we received the data, we will display it&nbsp; &nbsp; if (data.length > 0){&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text> name: {data[0].name} diploma: {data[1].education[0].diploma}</Text>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}return (&nbsp; <View>&nbsp; &nbsp; &nbsp;{renderText()}&nbsp; </View>);输出：

Answer 2

由于您已经将响应保存在data数据中，因此应该是这样的，data = [&nbsp; {&nbsp; &nbsp; code: "12459552",&nbsp; &nbsp; id: 7,&nbsp; &nbsp; name: "Dr xavier vilan",&nbsp; &nbsp; speciality: "Cardio"&nbsp; },&nbsp; {&nbsp; &nbsp; education: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; date_debut: "2020-02-07",&nbsp; &nbsp; &nbsp; &nbsp; date_end: "2020-02-06",&nbsp; &nbsp; &nbsp; &nbsp; diploma: "asmaa",&nbsp; &nbsp; &nbsp; &nbsp; school: "asmaa",&nbsp; &nbsp; &nbsp; &nbsp; city: "vullez"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }]现在您可以访问name&diploma如下，name: data[0].namediploma: data[1].education[0].diploma

Answer 3

尝试这个：return (&nbsp; &nbsp;<View>{JSON.stringify(data, null, 2)}</View>)