数组内部的映射数组反应本机

Question

在控制台记录我从 Firebase 获取数据的状态后，我得到一个数组。我想知道：任何人都可以帮助我映射数组并获得有关 ui 的以下详细信息。谢谢。

我试过下面的方法，但是应用一直报错

     Array [
      Object {
        "lists": Array [
          Object {
            "lists": Array [
              Object {
                "id": "123",
                "imageUrl": "http://www.pngmart.com/files/1/Pizza-Slice-PNG-Transparent-Image.png",
                "name": "Chicken Devill pizza",
                "price": 700,
                "size": "Medium",
              },
            ],
            "randomid": "32013408-0f48-4b15-80c4-eba3fc1fe295",
          },
          Object {
            "lists": Array [
              Object {
                "id": "1234",
                "imageUrl": "http://www.pngmart.com/files/1/Cheese-Pizza.png",
                "name": "Cheese pork pizza",
                "price": 1500,
                "size": "Medium",
              },
            ],
            "randomid": "12a74805-4932-4397-b838-6773bc7e44b8",
          },
        ],
      },
    ]

在下面的代码中显示错误：

TypeError: undefined is not a function (near '...this.state.lists.map...')

    {this.state.lists.lists.map((current, i) => (
             
                        ))}

Answer 1

这里的第一个list是一个数组，不是一个对象。因此你不能调用 lists.lists。

您将需要展平列表或使用嵌套映射操作。

export default function App() {
  const state = {
    lists: [
      {
        lists: [
          {
            id: "123",
            imageUrl:
              "http://www.pngmart.com/files/1/Pizza-Slice-PNG-Transparent-Image.png",
            name: "Chicken Devill pizza",
            price: 700,
            size: "Medium"
          }
        ],
        randomid: "32013408-0f48-4b15-80c4-eba3fc1fe295"
      },
      {
        lists: [
          {
            id: "1234",
            imageUrl: "http://www.pngmart.com/files/1/Cheese-Pizza.png",
            name: "Cheese pork pizza",
            price: 1500,
            size: "Medium"
          }
        ],
        randomid: "12a74805-4932-4397-b838-6773bc7e44b8"
      }
    ]
  };

  return (
    <div className="App">
      {state.lists.map((list) => {
        return list.lists.map((item) => {
          return <p>{item.id}</p>;
        });
      })}
    </div>
  );
}

你可以在这里找到这个工作：https://codesandbox.io/s/nervous-tu-u2h8v?file=/src/App.js

Answer 2

我也想自己补充点东西

我在这样的映射中完成了映射

{this.state.lists.map((current, i) => (
            
           <View>
           {current.map((current, i) => (
           <Fragment>
           
            <TouchableOpacity style={styles.card}  onPress={() => this.details(current.id)}>
                <Image style={styles.img} key={i} source={{uri: current.lists[0].imageUrl}}/>
                <Text  style={styles.txt} key={i}>{current.lists[0].name}</Text>
                <Text  style={styles.txt} key={i}>{current.lists[0].size}</Text>
                <Text style={styles.txt} key={i}>LKR.{current.lists[0].price}</Text>
            </TouchableOpacity>
           </Fragment> 
           ))} 
           </View> 
           ))}

数组内部的映射数组反应本机

Map array inside of arrays reactNative

arrays

mapping

arraylist

react-native