React 组件在 map 中给出 no-unused-expression 错误答案

【问题标题】：React component giving no-unused-expression error in mapReact 组件在 map 中给出 no-unused-expression 错误
【发布时间】：2020-06-20 11:33:29
【问题描述】：

我对 React 很陌生，希望能得到简单的帮助。

以下代码是我的培训应用程序的一部分，我只是无法弄清楚我遇到的问题。指针会非常有帮助并节省我的时间。

const transformedIngredients = Object.keys(props.ingredients).map(igKey => {
  return [...Array(props.ingredients[igKey])].map((_, i) => {
    <BurgerIngredient key={igKey + i} type={igKey} />;
  });
});

我得到的错误是：

第 8:37 行：预期为赋值或函数调用，但看到的是表达式 no-unused-expressions

谁能给我一个有用的指点？

【问题讨论】：

标签： javascript html reactjs return jsx

【解决方案1】：

删除=>后的{}，或在{}后添加return

.map(... => <YourComponent />) // OK
.map(... => {return <YourComponent />}) // OK
.map(... => {<YourComponent />}) // Error

const transformedIngredients = Object.keys(props.ingredients).map(igKey => {
  return [...Array(props.ingredients[igKey])].map((_, i) => 
    <BurgerIngredient key={igKey + i} type={igKey} />;
  );
});

【讨论】：