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 s的数组（基于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>
)

Answer 2

区别在于如何指定箭头函数的主体。

{ todos.map( todo => 
    <li key={todo.id}>{todo.name}</li>
)}

是正文中的表达式，默认情况下不需要返回语句

  <ul>
    { todos.map(todo => <li key={todo.id}>{todo.name}</li>) }
  </ul>

在块中定义时，需要包含return语句。

Answer 3

这里，你很好地添加了一个块语句，在块语句中，隐式返回在语法上是不明确的，现在它返回undefined。在ES6中，箭头函数返回在某些情况下是隐式的。就像你添加了一个块，它是未定义的。您可以在this帖子中找到更多详细信息。

Answer 4

如果查看map的文档，则必须返回一个值，该值将是map函数创建的新数组中的新值。这意味着return必须存在于map函数的回调中，无论是显式还是隐式声明。

您在第一个和第二个示例中声明为回调的箭头函数（例如todo => <li key={todo.id}>{todo.name}</li>）是相等的。您可能希望在文档here中引用不同的方法来声明箭头函数。

然而，在第三个示例中，您返回的block代码没有返回语句。 javascript运行时的默认行为是返回undefined。以下是一些演示此行为的代码：

const test = () => { var a; /* a block of code with no return statement */ }

const a = test();

console.log(a);

因此，第三个示例中从map函数返回的数组元素将是未定义的。这是您的待办事项未在列表中呈现的主要原因。

反应组件与箭头功能奇怪的行为

4 个答案: