javascript - Expected an assignment or function call and instead saw an expression in reactjs while using graphcms - Stack Overf

admin管理员组

文章数量:1291026

Line 11: Expected an assignment or function call and instead saw an expression

This is the error i get every time i run

npm start

in my React JS app i am writing. GraphCMS for CMS. Everything is working fine, except that when I try to map posts, it gives this error.

I suspect the problem might be related to JSHint, but I have no idea how to fix this.

Here is my code:

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);

(A screen shot of the same code)

Line 11: Expected an assignment or function call and instead saw an expression

This is the error i get every time i run

npm start

in my React JS app i am writing. GraphCMS for CMS. Everything is working fine, except that when I try to map posts, it gives this error.

I suspect the problem might be related to JSHint, but I have no idea how to fix this.

Here is my code:

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);

(A screen shot of the same code)

• javascript
• reactjs

Share Improve this question Follow edited Dec 7, 2018 at 14:38 David Maze 160k4545 gold badges243243 silver badges287287 bronze badges asked Dec 7, 2018 at 9:46 aditya kumaraditya kumar 3,0231111 gold badges4444 silver badges9090 bronze badges 10

• Please post the plete error message and stacktrace – Andreas Commented Dec 7, 2018 at 9:48
• add return here: return (<article className="content" key={post.id}>....</article>) or use concise body with map callback method (replace {} with ()), like this: {allPosts.map(post => (<article ......))} – Mayank Shukla Commented Dec 7, 2018 at 9:49
• Failed to pile ./src/LandingPage.js Line 11: Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error. – aditya kumar Commented Dec 7, 2018 at 9:50
• @MayankShukla putting return there doesn't make any difference. – aditya kumar Commented Dec 7, 2018 at 9:52
• @Andreas this is all the error message i get . – aditya kumar Commented Dec 7, 2018 at 9:53

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 8

When you write

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

the right-hand side of the arrow function either needs to be an expression

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

or a block containing a statement

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

The JSX <Article /> expands to a JavaScript expression, which can’t be a top-level statement inside curly braces.

本文标签：