Question

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

2020-03-06

48

javascript reactjs redux

我在 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>

我甚至在使用调试器时获得了地图内的控件。但地图内没有打印任何内容。请帮忙。

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 都在 () 中，而不是 {

此外，请在 render 方法中解构您的 props，以使代码更简洁。