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

Question

第11行:期望一个赋值或函数调用，然后看到一个表达式

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

npm启动

在我的React应用程序中，我正在编写。细胞质雄性不育的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表达式，它不能是大括号内的顶级语句。