Javascript 使用arrow函数反应组件的异常行为

我正在使用此代码遵循官方的redux教程（它可以工作！）

consttodolist=（{todos}）=>(

{todo.map（todo=>
{todo.name}
)}

)

我一直在研究语法，这也很有效：

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

consttodolist=（{todos}）=>(

{todo.map（todo=>{
return
{todo.name}
})}

)

但这不起作用：

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

consttodolist=（{todos}）=>(

{todo.map（todo=>{
{todo.name}
})}

)

---

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

因为箭头功能

todo => {
    <li key={todo.id}>{todo.name}</li>
}

您必须在

.map（）

如果回调仅包含1个表达式并立即返回，则可以省略

{}

和

返回

const foo = () => {
  return 'foo'
}

等于

const foo = () => 'foo'

现在你可以：

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

---

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

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

{todo.map（todo=>
{todo.name}
)}

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

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

{todo.map（todo=>
{todo.name}
）}

---

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

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

如果您查看文档，您必须返回一个值，该值将是map函数创建的新数组中的新值。这意味着

return

必须存在于map函数的回调中，无论是显式声明还是隐式声明

在第一个和第二个示例中声明为回调的箭头函数（例如

todo=>
{todo.name}

）相等。您可能需要参考文档中声明箭头函数的不同方法

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

const test=（）=>{var a；/*没有返回语句的代码块*/}
常数a=测试（）；
控制台日志（a）这是因为第三个示例没有返回任何内容。语法
（args）=>{statements}
创建一个块来存放语句。语法
（args）=>expression
隐式返回
expression
，但不是第一个语法。第一种语法使用块，不隐式返回值，因此返回未定义的值，除非您给它一个return语句。阅读文档。你的意思是在块内返回时键入。调整答案
const TodoList = ( {todos} ) => (
    <ul>
      { todos.map(todo => <li key={todo.id}>{todo.name}</li>) }
    </ul>
)

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

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