javascript - react 组件与箭头函数奇怪的行为

Question

我正在使用这段代码关注官方的 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>
)

谁能解释它们之间的区别以及第三个失败的原因？

Answer 1

因为箭头函数

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