根据嵌套值显示嵌套数组

Question

我试图在我的屏幕上显示一个嵌套数组（见下面的数组），第一层显示正确，但是当我尝试显示第二层时，它 return 什么都没有，第二层数组中的项目只有在 selected=false 时才应该显示，这就是为什么我决定首先使用 forEach 函数的原因。

地图

   const items = order.order.map((item) => {
    
          const additional = item.additional.forEach((e) => {
                e.data.map((a) => {
                    const id = Math.random() * Math.random() + a.id
                    if(a.selected == false){
                      return(
                        <View key={id}>
                          <Text>{a.title}</Text>
                          <Text>$ {a.price}</Text>
                        </View>
                      )
                    }
                  })
              })
    
          return (
            <View key={item.id}>
               <Text>{item.quantity}</Text>
               <Text>{item.title}</Text>
               <Text>$ {item.price.toFixed(2)}</Text>
              {additional}
            </View>
          )
        })

数组 ITEM

Object {
  "additional": Array [
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 0,
          "selected": false,
          "title": "Hot Sauce",
          "type": "Sauces",
        },
        Object {
          "id": 1,
          "price": 0,
          "selected": false,
          "title": "Medium Sauce",
          "type": "Sauces",
        },
      ],
      "id": 1,
      "required": true,
      "title": "Sauces",
    },
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 1,
          "selected": false,
          "title": "Ranch",
          "type": "Sides",
        },
        Object {
          "id": 1,
          "price": 1,
          "selected": false,
          "title": "Blue Cheese",
          "type": "Sides",
        },
      ],
      "id": 0,
      "required": false,
      "title": "Sides",
    },
  ],
  "id": 0.103,
  "price": 6.95,
  "quantity": 1,
  "title": "Buffalo Wings",
}

Answer 1

import "./styles.css";

const data = {
  additional: [
    {
      data: [
        {
          id: 0,
          price: 0,
          selected: false,
          title: "Hot Sauce",
          type: "Sauces"
        },
        {
          id: 1,
          price: 0,
          selected: true,
          title: "Medium Sauce",
          type: "Sauces"
        }
      ],
      id: 1,
      required: true,
      title: "Sauces"
    },
    {
      data: [
        {
          id: 0,
          price: 1,
          selected: true,
          title: "Ranch",
          type: "Sides"
        },
        {
          id: 1,
          price: 1,
          selected: false,
          title: "Blue Cheese",
          type: "Sides"
        }
      ],
      id: 0,
      required: false,
      title: "Sides"
    }
  ],
  id: 0.103,
  price: 6.95,
  quantity: 1,
  title: "Buffalo Wings"
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div className="content" key={data.id}>
        <div>Title: {data.title}</div>

        <div>Price: {data.price.toFixed(2)}</div>

        <div>Qty: {data.quantity}</div>

        <br />

        <div>Additional:</div>
        {data.additional.map((item, index) => {
          return (
            <div key={item.id}>
              {item.title}:
              <ul>
                {item.data
                  .filter((data) => !data.selected)
                  .map((data, dataIndex) => {
                    return (
                      <li key={data.id}>
                        <div>
                          {data.title} - {data.type}
                        </div>
                      </li>
                    );
                  })}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

上面提到的 Ass，forEach 没有 return 任何东西。所以你可以结合过滤器和地图。这是工作沙箱 https://codesandbox.io/s/competent-leavitt-b2e2ec?file=/src/App.js

根据嵌套值显示嵌套数组

Display nested array depending on nested value

javascript

arrays

reactjs

react-native

multidimensional-array