在反应的渲染函数中迭代数据时有关于箭头函数语法的说明[重复]

问题描述 投票:1回答:3

这个问题在这里已有答案:

我只是使用像这样反应的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>
  )
}

然后它抛出错误

(Please look curly braces after arrow, if put "(" inplace of curly braces "{" then every things goes fine)

like "Expected an assignment or function call instead saw an expression", but if I put ( after => then everythings goes fine.

但我怀疑箭头的正确语法是这样的()=> {}。

请帮帮我。

javascript reactjs ecmascript-6 arrow-functions
3个回答
1
投票

这对括号形成一个块,包含一个语句列表。您需要显式使用return语句以使函数返回某些内容。如果省略大括号,则箭头函数具有简洁的主体,该主体仅由单个表达式组成,其结果将隐式成为函数的返回值。

它是如何帮助的!


1
投票

你没有回来任何东西。使用箭头功能时,您有两个选项。

1. Concise body

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

2. Block body

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)


1
投票

在传统的函数声明中,需要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 })

现在,这将正确返回对象。

热门问题
推荐问题
最新问题