javascript - 在 ReactJS 中映射数组时出现意外标记 (,)

Question

这个问题已经有答案了:

React.js - Syntax error: this is a reserved word in render() function (3 个回答)

已关闭 5 年前。

当我尝试在 React 中映射数组时(使用此代码):

const { loading, error, posts } = this.props;
    return(
    {posts.map(onePost => ({
        <p key={onePost.id}>{onePost.title}</p>

    }))}
    );

我收到错误:

    ERROR in ./src/client/app/mainGrid.jsx
Module build failed: SyntaxError: C:/[redacted]/react/src/client/app/mainGrid.jsx: Unexpected token, expected , (15:8)

  13 |          return(
  14 |
> 15 |          {posts.map(onePost => ({
     |                ^
  16 |                  <p key={onePost.id}>{onePost.title}</p>
  17 |
  18 |          }))}

 @ ./src/client/app/index.jsx 27:16-41

我不知道为什么会发生这种情况，在我看来一切都很好。

Answer 1

我清理了你的代码片段，你有太多不需要的括号。要了解详细信息，将 return 语句包装在 {} 中是告诉 js 您正在返回一个对象，但您正在尝试返回一个表达式(该表达式又返回一个数组)。为了让 js 计算该表达式，您将其包装到 () 中，然后通常会返回该表达式。

即使在 .map 内的箭头函数中添加额外的 {}，您也需要执行两次此操作，与之前的解释相同。

const { loading, error, posts } = this.props;

return (
  posts.map(onePost => (
    <p key={onePost.id}>{onePost.title}</p>
  )
);

在这种情况下，您可以更进一步，删除返回语句中的括号:

const { loading, error, posts } = this.props;

return posts.map(onePost => <p key={onePost.id}>{onePost.title}</p>);