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

Question

我在 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 内没有打印任何内容。请帮忙。

Answer 1

在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都在()里面，不是{}

此外，在渲染方法中解构你的 props，以使代码更清晰。