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

Question

我收到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} alt="" class="img-fluid" />
                                    <h3>{post.title}</h3>

                                </div>
                            </ul>})
                        }

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

Answer 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} alt="" class="img-fluid" />
                <h3>{post.title}</h3>
                </div>
            </ul>
        )
    })
}

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

Answer 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 语法！