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，请将其用作密钥。

如何在ReactJS中渲染嵌套数据？

3 个答案: