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 箭头函数问题？

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

<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}/>)}

上面的代码在没有返回的情况下工作，因为它在箭头（ => ）之后没有大括号，所以没有大括号的单行代码隐式引用了 javascript 中的 return 语句