如何渲染 ReactJS 中的嵌套數據？

Question

我有類似的數據，我想渲染它們。

假設我想為乘客擁有的每個航班顯示firstName 、 address 、以及seatType和flightId 。這必須為每個乘客完成。 我怎樣才能做到這一點？

更新

[
        {
            "id": 1,
            "firstName": "Smith",
            "lastName": "John",
            "address": [
                "1 Street",
                "YYY",
            ],
            "flights": [
                {
                    "flightId": 1,
                    "seatType": "oridinary"
                },
                {
                }
            ]
        },
        {},
]

這是我的代碼

render() {
    const { data } = this.state;
    return (
        <div>
            {" "}
            {Object.keys(data).map((key, index) => (
            <p key={index}>
                {" "}
                {key} {data[key].flights}
                {data[key].flights.map(k => (
                {data[key].flights[k]}
                ))}
            </p>
            ))}
        </div>
    );
}

Answer 1

我假設你正在尋找這樣的東西：

return (
        <div>
            {
              passengers.map(passenger => {
                if (!passenger.id) { return null } /* + */
                return (
                  <div key={passenger.id}>
                    <span>{passenger.firstName} {passenger.lastName}</span>

                    <div>
                      <span>Passenger's Flights</span>
                      {
                        passenger.flights && /* + */
                        Array.isArray(passenger.flights) && /* + */  passenger.flights.map(flight => {
                          if (flight.flightId) {
                          return (
                            <div key={flight.flightId}>
                              {flight.seatType}
                            </div>
                            )
                          }
                          return null
                        })
                      }
                    </div>
                  </div>
                )
              })
            }
        </div>
    );
}

注意：請記住，您不應該使用索引作為鍵。

編輯：您需要添加一個空/未定義檢查

Answer 2

render() {
  const { data } = this.state;
  return (
    <div>
      {data.map((passenger, index) => (
        <p key={index}>
          {passenger.firstName} {passenger.address.join(' ')}
          {passenger.flights.map(flight => (
            <p>{flight.seatType} {flight.flightId}</p>
          ))}
        </p>
      ))}
    </div>
  );
}

Answer 3

render() {
  const { data } = this.state;
  return (
    <div>
      {data.map(({id, firstName, address, flights}) => (
        <p key={id}>
          <div>{firstName}</div>
          <div>{address.join(', ')}</div>
          {flights.map(f => (<div key={f.flightId}>{f.flightId}-{f.seatType}</div>))}
        </p>
      ))}
    </div>
  );
}

不確定它是否可以編譯，但它是這樣的。 此外，如果您有 ID，請將其用作密鑰。