javascript - 在ReactJS中通过数组进行映射时，即使该数组具有元素，浏览器中也不会显示任何内容

我在redux存储中初始化了以下数据

flightSeats: {
    AH001: {
      AH1: [
        {
          seatNumber: "1A",
          isBooked: true
        },
        {
          seatNumber: "1B",
          isBooked: true
        },
        {
          seatNumber: "1C",
          isBooked: false
        },
        {
          seatNumber: "1D",
          isBooked: false
        },
        {
          seatNumber: "1E",
          isBooked: false
        },
        {
          seatNumber: "1F",
          isBooked: false
        }
      ], //.... continues for key AH2 and so on.

在JSX中，我尝试显示如下

<li>
  <ol className="seats" type="A">

    //the data is printed to console successfully
    {console.log(flightSeats.AH001.AH1)}

    {this.props.flightSeats.AH001.AH1.map(flightSeat => {
      <li className="seat">
        <input type="checkbox" id={flightSeat.seatNumber} />
        <label htmlFor={flightSeat.seatNumber}>
          {flightSeat.seatNumber}
        </label>
      </li>;
    })}
  </ol>
</li>

使用调试器时，我什至在地图内获得控件。但是地图内部没有任何内容。请帮忙。

最佳答案

在map方法中，应该使用.map(() =>{})而不是.map(() => <Example /> )，其中Example是您的jsx。看这个例子，我必须告诉你：

 render() {
      const { products } = this.state;
      const { amount } = this.props;
      return (
        <ProductList>
          {products.map((product) => (
            <li key={product.id}>
              <img
                src={product.image}
                alt={product.title}
              />
              <strong>{product.title}</strong>
              <span>{product.priceFormatted}</span>
              <button
                type="button"
                onClick={() => this.handleAddProduct(product.id)}
              >
                <div>
                  <MdAddShoppingCart size={16} color="#fff" />
                  {' '}
                  {amount[product.id] || 0}
                </div>
                <span>adicionar ao carrinho</span>
              </button>
            </li>
          ))}
        </ProductList>
      );
    }

所有的jsx都在()而不是{}内部

另外，在render方法中解构道具，以使代码更简洁。