Question

当我尝试在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>
  )
);

在这种情况下，您可以更进一步，并删除return语句中的括号：

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

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

在ReactJS中映射数组时出现意外的标记（，）

1 个答案: