预期有一个赋值或函数调用，但在使用 graphcms 时却在 Reactjs 中看到了一个表达式

第 11 行：预期有一个赋值或函数调用，但却看到了一个 表达

这是我每次运行时都会遇到的错误

npm 启动

在我正在编写的 React JS 应用程序中。用于 CMS 的 GraphCMS。一切工作正常，除了当我尝试映射帖子时，它给出了这个错误。

我怀疑这个问题可能与 JSHint 有关，但我不知道如何解决这个问题。

这是我的代码：

import React from  'react';
import { Link } from 'react-router-dom';
import  { graphql} from 'react-apollo';
import gql from 'graphql-tag';

const LandingPage = ({data: {loading, allPosts}}) => {
    if(!loading) {
        return (
            <div className="wrapper">
                {allPosts.map(post => { // <-- line 11
                    <article className="content" key={post.id}>
                        <h2>{post.title}</h2>
                        <p dangerouslySetInnerHTML={{__html: post.description}}>
                            <Link to={`/post/${post.slug}`}>
                                <button className="btn">Read More</button>
                            </Link>
                        </p>
                    </article>
                })}
            </div>
        );
    }
    return <h2>Loading Posts...</h2>
};

const allPosts = gql`
    query allPosts {
        allPosts {
            id
            title
            description
            slug
        }
    }
`;

export default graphql(allPosts)(LandingPage);

(相同代码的屏幕截图 https://i.stack.imgur.com/C3cVG.png)

当你写的时候

allPosts.map(post => { <Article /> })

箭头函数的右侧必须是一个表达式

allPosts.map(post => <Article />)

或包含语句的块

allPosts.map(post => { return <Article />; })

The JSX <Article />扩展为 JavaScript表达，它不能是大括号内的顶级语句。