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

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

Answer 2

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

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

是一个表达式在体内，默认情况下不需要return语句，

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

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

Answer 3

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

Answer 4

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

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

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

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

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