如何在本机反应中渲染json对象中的所有项目？

Question

我需要在 react native 视图中渲染一个 json 对象中的所有项目，但其中一些不在数组中，也不是单个项目。

这是我的 api：

{
"meta": {
    "code": 200,
    "message": "success",
    "errors": []
},
"data": {
    "users": [
        {
            "userinfo": {
                "username": "hesamsameni",
                "fullname": "hesam sameni",
                "photo": "https://aaa.com/img/hesamsameni.png",
                "skills": {
                    "html": "HTML",
                    "css": "CSS",
                    "javascript": "JAVASCRIPT",
                    "react_native": "REACT NATIVE"
                }
            }
        }
    ]
}
}

这是我的渲染方法：

  render() {
return (
  <View>
    <FlatList
      data={this.state.dataSource}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({item}) => 
       <View>
         <Text>{item.fullname}</Text>
         <Image source={{uri: item.photo}}/>
         <Text>Skills:</Text>
         // I need to render all the skills here
       </View>
    }></FlatList>
   </View>

Answer 1

你可以试试这个吗？

lapsList(datas) {
    const keys = Object.keys(datas); // Get all keys from dictionary

    return keys.map((key) => {
      return (
        <Text>{datas[key]}</Text>
      )
    })
}

render() {
return (
  <View>
    <FlatList
      data={this.state.dataSource}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({item}) => 
       <View>
         <Text>{item.fullname}</Text>
         <Image source={{uri: item.photo}}/>
         <Text>Skills:</Text>

         {this.lapsList(item.skills)}
         // I need to render all the skills here
       </View>
    }></FlatList>
   </View>