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

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.",
}]

谢谢。享受编码。

Answer 2

Places是一个对象，您不能像这样迭代。您必须使用Object.keys获取密钥，然后遍历它们。这样。

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

Answer 3

另一种解决方案是使用传播运算符：

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

Answer 4

我在此处https://snack.expo.io/rk4f3aSnQ处创建了带有解决方案的小吃。

map函数属于数组类，因此不适用于对象。

我将对象放在项目的places.json文件中。您一定会找到一种方法。另外，在使用return时，始终将react-native编码为单个组件，就像您在App.js文件中注意到的那样，此代码段：

render() {
    return (
        <View style={styles.container}>
          {places.map((place) =>
              <View>
                <Text>{place.title}</Text>
                <Text>{place.description}</Text>
              </View>)}
        </View>
    );
  }

用地图反应本机循环

4 个答案: