期望赋值或函数调用，而是在使用 graphcms 时在 reactjs 中看到了一个表达式

Question

第 11 行：期望赋值或函数调用，但看到的是表达式

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

启动

在我正在编写的 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);

（相同代码的屏幕截图）

Answer 1

当你写

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

箭头函数的右侧要么需要是一个表达式

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

或包含语句的块

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

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