React-遍历数组和事件

Question

假设我有一系列用来设置初始状态的汽车：

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箭头功能问题？

此外，请考虑以下组件，该组件正在通过prop传递方法引用：

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

这不符合预期，因为它应该在发生更改事件时调用changeCarNameHandler方法，这是组件代码：

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

但是，这正在起作用

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

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

Answer 1

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

如果在箭头（=>）后添加花括号，则必须显式添加一个return语句以呈现Car组件看起来像-

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

和

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

上面的代码无法返回，因为在arrow（=>）之后没有花括号，因此没有花括号的单行代码隐式引用了javascript中的return语句

Answer 2

没有return语句的自然函数默认情况下未定义返回。

此变化通过箭头函数，可能会隐式返回。

如果箭头函数具有单个表达式作为函数主体，则将执行该表达式，并且在调用该函数时将隐式返回结果值。

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

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

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

要使箭头函数包含语句，函数主体必须用{curlies}包围。并且一旦在函数主体周围放上花括号，对于语句或表达式，返回就不再是隐式的。

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

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