javascript - 用箭头功能 react 组件奇怪的行为

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