反应：解析错误：意外的令牌，预期的“（”

Posted 2023-02-21

【中文标题】反应：解析错误：意外的令牌，预期的“（”

【英文标题】：React: Parsing error: Unexpected token, expected "("

【发布时间】：2020-11-15 15:56:28

【问题描述】：

我收到Parsing error: Unexpected token, expected "("。

我不知道我在哪里得到这个意外错误。无论如何，我可能是 reactJS 的新手。如果有人能弄清楚我在哪里得到这个意外错误，那就太好了。非常感谢您。

./src/components/listing/Search.js ：

function PostListPageByUser() 
    const [posts, setPost] = useState([]);
    const [userId, setUserId] = useState([]);
    let signal = axios.CancelToken.source();

    function handleChange(event) 
        setUserId(event.target.value);
    

    function handleClick = (event) => 
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, 
            cancelToken: signal.token,
        )
            .then(res => 
                const posts = res.data;
                setPost(posts);
            ).catch(err => 
            console.log(err);
        );
    
    return (
        <React.Fragment>
        <section class="product_list section_padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="product_sidebar">
                        <div class="single_sedebar">
                            <form>
                                <input type="text" name="search" onChange=handleChange placeholder="Search keyword"/>
                                <i class="ti-search" onClick=handleClick></i>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="product_list">
                        <div class="row"> <br/><br/><br/>

                        
                            posts.map((post) => <ul key=post.id>
                                <div class="col-lg-8 col-xl-9">

                                    <img src=post.product_image  class="img-fluid" />
                                    <h3>post.title</h3>

                                </div>
                            </ul>)
                        

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>
        </React.Fragment>
    );

【参考方案1】：

我发现你的 sn-p 有 2 个问题。

首先，由于您使用的是handleClick 的箭头函数，因此您需要将其更改为：

    const handleClick = (event) => 
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, 
            cancelToken: signal.token,
        )
        .then(res => 
            const posts = res.data;
            setPost(posts);
        ).catch(err => 
        console.log(err);
    );

其次，

    posts.map((post) => 
        return(
            <ul key=post.id>
                <div class="col-lg-8 col-xl-9">
                <img src=post.product_image  class="img-fluid" />
                <h3>post.title</h3>
                </div>
            </ul>
        )
    )

顺便说一句，ul 标签在这里被滥用了。您应该改用div。这不应该阻止您的代码工作，但为了知识和在生产环境中工作，始终使用正确的标签很重要。你可以了解更多here

【参考方案2】：

你需要改变这部分

const handleClick = (event) => 
        axios.get("http://localhost:8000/api/car/p_list?search=" + event, 
            cancelToken: signal.token,
        )
            .then(res => 
                const posts = res.data;
                setPost(posts);
            ).catch(err => 
            console.log(err);
        );
    

您不能同时使用function 和arrow function 语法！

【讨论】：

好的！现在我收到此错误：Expected an assignment or function call and instead saw an expression no-unused-expressions

请阅读这篇文章：***.com/questions/45573277/…

我没有从上面的链接中得到任何有用的信息。