React中map回调用{}含if逻辑时无法渲染数据的解决咨询

你用{}包裹map回调时，没有返回符合条件的JSX元素——控制台能打印数据说明循环正常执行，但if块里的<div>只是创建了元素，没返回给map，所以页面没有内容。用()时是隐式返回，所以能正常渲染。

方法1：在{}里明确return JSX #

直接在if条件块里给JSX加return，让map能拿到要渲染的元素：

{data.productData.map((item) => {                
  if (item.id % 2 === 0 || item.id === 0) {
    // 这里加return
    return (
      <div key={item.id} className="product-item">
        <img src={item.photo} alt="" />
        <div>Name : {item.name} </div>
        <div>Color : {item.color} </div>
        <button onClick={() => dispatch(addToCart(item))}>
          ADD to Cart
        </button>
      </div>
    );
  } else {
    // 不符合条件时返回null，避免渲染空内容
    return null;
  }
})}

方法2：用三元运算符实现隐式返回（可以放在()里） #

如果逻辑简单，用三元运算符替代if，就能继续用()做隐式返回，代码更简洁：

{data.productData.map((item) => (
  item.id % 2 === 0 || item.id === 0 ? (
    <div key={item.id} className="product-item">
      <img src={item.photo} alt="" />
      <div>Name : {item.name} </div>
      <div>Color : {item.color} </div>
      <button onClick={() => dispatch(addToCart(item))}>
        ADD to Cart
      </button>
    </div>
  ) : null
))}

方法3：先过滤数组再map（更推荐） #

先把符合条件的元素筛选出来，再进行map渲染，逻辑更清晰，也避免在map里写条件判断：

{data.productData
  .filter(item => item.id % 2 === 0 || item.id === 0)
  .map(item => (
    <div key={item.id} className="product-item">
      <img src={item.photo} alt="" />
      <div>Name : {item.name} </div>
      <div>Color : {item.color} </div>
      <button onClick={() => dispatch(addToCart(item))}>
        ADD to Cart
      </button>
    </div>
  ))
}

内容的提问来源于stack exchange，提问作者Amarj