React - 遍历数组和事件答案

【问题标题】：React - iterating through an array and EventsReact - 遍历数组和事件
【发布时间】：2020-09-18 18:52:11
【问题描述】：

假设我有一组用于设置初始状态的汽车：

const [ carState, setCarstate ] = useState({
    cars: [
      {model: 'Ferarri', yearOfFabrication: 2001},
      {model: 'Toyota', yearOfFabrication: 2005},
      {model: 'Tesla', yearOfFabrication: 2017},
      {model: 'Ford Mustang', yearOfFabrication: 2003}
    ]
});

谁能解释一下为什么下面的代码没有显示任何汽车？

{carState.cars.map(car => {<Car model={car.model} age={car.yearOfFabrication}/>})}

而这个工作正常吗？

{carState.cars.map(car => <Car model={car.model} age={car.yearOfFabrication}/>)}

这两段代码之间的唯一区别是，第一段将返回值封装在一段代码中。所以也许这不是一个 React 问题，而是一个 ES6 箭头函数问题？

另外，请考虑以下通过 props 传递方法引用的组件：

<Input handler={() => changeCarNameHandler}/>

这并没有按预期工作，因为它应该在更改事件时调用 changeCarNameHandler 方法，这是组件代码：

const input = props => {
    return(
        <input onChange={props.handler}></input>
    )
}

但是，这是有效的

<Input handler={(event) => changeCarNameHandler(event)}/>

有人可以澄清一下吗？如果您还可以提供一些资源让我可以阅读更多相关信息，我们将不胜感激。

【问题讨论】：

.map(car => { <Car /> }) 缺少return 语句，因此返回undefined。与此同时，.map(car => <Car />) 实际上返回了 JSX。
有道理，谢谢！

标签： javascript reactjs ecmascript-6 arrow-functions

【解决方案1】：

{carState.cars.map(car => {<Car model={car.model} age={car.yearOfFabrication}/>})}

如果您在箭头 ( => ) 之后添加花括号，那么您必须显式添加一个返回语句来呈现您的 Car 组件所以看起来-

{carState.cars.map(car => { return (<Car model={car.model} age={car.yearOfFabrication}/>)}
)}

和

{carState.cars.map(car => <Car model={car.model} age={car.yearOfFabrication}/>)}

上面的代码无需返回即可工作，因为它在箭头（=>）之后没有大括号，因此没有大括号的单行代码隐式引用了javascript中的return语句

【讨论】：

【解决方案2】：

没有 return 语句的函数自然会默认返回 undefined。

这会随着箭头函数的变化而改变，它可能具有隐式返回。

如果您的箭头函数只有一个表达式作为函数体，则该表达式将被执行，并在调用该函数时隐式返回结果值。

const simple = () => 'code'
simple()    // returns 'code'

对于具有隐式返回的箭头函数，需要一个表达式。但有时我们需要使用语句（if-else 等）。

在编程语言中，表达式返回值或可替换为值。一条语句将执行一些没有结果值的代码。

对于包含语句的箭头函数，函数体必须用 {curlies} 包围。一旦你的函数体周围有花括号，返回就不再是隐含的——无论是语句还是表达式。

const simple = () => { return 'code' }
simple()     // returns 'code'

const broken = () => { 'code' }
broken()       // returns undefined

【讨论】：