map在react中不显示{}(花括号)的数据

Question

所以我试图通过映射从API返回数据，当我使用()这些括号时，当我使用{}来放置if语句时，我正在获取数据，我在网页上一无所获，但仍然在控制台获取数据

const Addtocart = () => {
const data = useSelector((state) => state);
console.log("products", data.productData);
const dispatch = useDispatch();
useEffect(() => {
dispatch(productList());
}, []);
return (
<div id="addtocart-info">
<div className="products">
{data.productData.map((item) => {                 // here this bracket  
if (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>;
console.warn(item.id);
} else {
console.log(item.id);
}
})}
</div>
</div>
);
};
export default Addtocart;

是否有办法将if语句与()放在一起或使其工作

Answer 1

你没有得到任何东西，因为当你使用{}时，你必须使用返回关键字，但是当你使用()时，你不必使用返回关键字，因为这里面的整个代码被认为是一段代码，即使它分布在多行中所以把代码改成

{data.productData.map((item) => {                 // here this bracket  
if (item.id % 2 === 0 || item.id === 0) {
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 {
console.log(item.id);
}
})}

Answer 2

如果使用花括号，则还需要使用return语句。基本上，如果在箭头函数中不使用花括号，则语句将自动返回。

的例子:

let x = someArray.map(x => x*2); // returns a new array with the expression applied
let x = someArray.map(x => {return x * 2}) // use the return here