用地图反应本机循环

Question

我正在用 React Native 开发一个应用程序，我有这个 JSON：

const places = {
  "place1":{
    "title":"title 1",
    "image":"../img/image1.jpeg",
    "description":"description 1.",
  },
  "place2":{
    "title":"title 2",
    "image":"../img/image2.jpeg",
    "description":"description 2.",
  }
}; 

我想在元素列表中输出它，我知道要做到这一点，我必须使用 map() 这是我的代码：

export default class App extends Component{
  render() {
    return (
      <View style={styles.container}>
        {places.map((place) => {
            return (
              <Text>{place.title}</Text>
              <Text>{place.description}</Text>
            )
         })}
      </View>
    );
  }
}

但它不起作用，有谁知道我错了或者我怎样才能达到我的目标？

Answer 1

Places 是一个对象，你不能像这样迭代。您必须使用 Object.keys 获取键并迭代它们。像这样。

Object.keys(places).map((key) => {
    return (
      <Text>{places[key].title}</Text>
      <Text>{places[key].description}</Text>
    )
 })}

Answer 2

MAP 函数适用于Array，不适用于对象。请更新您的 const 位置，如下所示：

const places = [{
  "title":"title 1",
  "image":"../img/image1.jpeg",
  "description":"description 1.",
},{
 "title":"title 2",
 "image":"../img/image2.jpeg",
 "description":"description 2.",
}]

谢谢。享受编码。