这个问题在这里已有答案:
我只是使用像这样反应的render函数里面的箭头函数从API迭代一些数据。
render() {
const postItem = this.props.posts.map((post, index) => {
<div key={post.id}>
<p>{index}</p>
<h4>{post.title}</h4>
<p>{post.body}</p>
</div>
})
return (
<div>
<p>Posts</p>
{postItem}
</div>
)
}
然后它抛出错误
但我怀疑箭头的正确语法是这样的()=> {}。
请帮帮我。
这对括号形成一个块,包含一个语句列表。您需要显式使用return语句以使函数返回某些内容。如果省略大括号,则箭头函数具有简洁的主体,该主体仅由单个表达式组成,其结果将隐式成为函数的返回值。
它是如何帮助的!
你没有回来任何东西。使用箭头功能时,您有两个选项。
render() {
const postItem = this.props.posts.map((post, index) => {
return (
<div key={post.id}>
<p>{index}</p>
<h4>{post.title}</h4>
<p>{post.body}</p>
</div>
)
})
return (
<div>
<p>Posts</p>
{postItem}
</div>
)
}
render() {
const postItem = this.props.posts.map((post, index) => {
return (
<div key={post.id}>
<p>{index}</p>
<h4>{post.title}</h4>
<p>{post.body}</p>
</div>
)
})
return (
<div>
<p>Posts</p>
{postItem}
</div>
)
}
当你写() => {}
时,你没有从你的表达中返回任何东西。这就是所谓的块体表示法,它需要一个显式的return语句。当您编写() => ()
时,您使用的是所谓的简洁体,它将起作用,因为返回是隐式的。你可以在这里阅读更多:Arrow functions: Function body (MDN)
在传统的函数声明中,需要return语句。
function Foo(bar) {
// do something..
return bar
}
使用箭头语法时,还需要return语句:
const Foo = (bar) => {
// do something..
return bar
}
这两个功能是相同的。
让我们考虑这个例子:
const adder = (a, b) => {
return a + b
}
此功能可以减少到这个:
const adder = (a, b) => a + b
你可以看到没有{}
没有return
需要。但是,如果通过(例如)调试,您需要在加法器函数中添加console.log
:
const adder = (a, b) =>
console.log(a)
a + b
这将破坏函数(它将返回console.log),因此需要修改以恢复到以前的函数结构。
const adder = (a, b) => {
console.log(a)
return a + b
}
在回答问题的'('
括号部分时,让我们考虑一下这个函数,它的目的是返回一个对象{}
:
const Foo = bar => {
return {
objectProperty: bar
}
}
现在我们希望按照前面的例子减少它。
const Foo = bar => { objectProperty: bar }
但现在这会破裂。因为虽然'我们'希望{}
成为我们的对象定义,但它们被编译器读取为函数语句{}
通过将对象包装在()
中可以防止此操作。
const Foo = bar => ({ objectProperty: bar })
现在,这将正确返回对象。