我正在使用这段代码关注官方的 redux 教程(它有效!)
const TodoList = ( {todos} ) => (
<ul>
{ todos.map( todo =>
<li key={todo.id}>{todo.name}</li>
)}
</ul>
)
我一直在研究语法,这也行得通:
const TodoList = ( {todos} ) => (
<ul>
{ todos.map( todo => {
return <li key={todo.id}>{todo.name}</li>
})}
</ul>
)
但这不起作用:
const TodoList = ( {todos} ) => (
<ul>
{ todos.map( todo => {
<li key={todo.id}>{todo.name}</li>
})}
</ul>
)
谁能解释它们之间的区别以及第三个失败的原因?
最佳答案
因为箭头函数
todo => {
<li key={todo.id}>{todo.name}</li>
}
什么都不返回,你会得到一个包含undefined
的数组(基于todos
的长度)。例如:
const ary = [1, 2, 3].map(el => { console.log(el) })
console.log(ary) // [undefined, undefined, undefined]
你必须在 .map()
的回调中返回一些东西
如果回调仅包含 1 个表达式并立即返回,则可以省略 { }
和 return
。
const foo = () => {
return 'foo'
}
等于
const foo = () => 'foo'
现在您可以:
const TodoList = ( {todos} ) => (
<ul>
{ todos.map( todo => (
<li key={todo.id}>{todo.name}</li>
))}
</ul>
)
( )
也不是必须的,如果您愿意,可以省略:
const TodoList = ( {todos} ) => (
<ul>
{ todos.map(todo => <li key={todo.id}>{todo.name}</li>) }
</ul>
)
关于javascript - react 组件与箭头函数奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43624273/