映射时如何使用onClick

Question

谁能帮我更正这段代码我想在我映射的数据上使用 onClick，但每次页面呈现时都使用 onClick 运行s。 :| 我的意思是当我点击时它不会运行但每次页面呈现时它运行s。 请检查 CollectionOption 部分

import React, {useState, useEffect} from "react";
import axios from "axios";
import ModalSubHeader from "../../styles/ModalSubHeader";
import CollectionHolder from "../../styles/CollectionHolder";
import {CollectionOption, CollectionOptionInner} from "../../styles/CollectionOption";
import CollectionIcon from "../../styles/CollectionIcon";
import CollectionIcons from "../../../../images/index";

function Collection(props) {
    
    const [collectionList, setCollectionList] = useState(null);
    useEffect(() => {
        axios
        .get("https://reg.my-waste.mobi/collections?project_id=556&district_id=556&zone_id=zone-z1250-z1261")
        .then(({data}) => {

            const collections = Object.values(data.collection.types).map(collection =>
                <CollectionOption onClick={props.onChoosed(collection.title)}>
                    <CollectionOptionInner> 
                        <CollectionIcon 
                        src={CollectionIcons.CollectionIcons[collection.iconicShape]} 
                        color={"#" + collection.colour} />
                    </CollectionOptionInner>
                        
                    <CollectionOptionInner>
                        {collection.title}
                    </CollectionOptionInner>
                </CollectionOption>
            );

            setCollectionList(collections)
        })        

        
        console.log(CollectionIcons);
    }, [])

    return(
        <div>
            <ModalSubHeader>What type of collection or event would you like to be reminded about?</ModalSubHeader>
            <CollectionHolder>
                {collectionList}
            </CollectionHolder>
        </div>
    )
}

export default Collection;

Answer 1

这是因为您在执行 map 时立即显式调用 onClick 处理程序。

相反，您应该传递回调函数以在 onClick 事件实际发生时执行它：

 <CollectionOption onClick={() => props.onChoosed(collection.title)}>

也可以考虑在 <CollectionOption key={collection.id} .../> 中使用 key 这样可以避免不必要的 re-renders.

Answer 2

您提供函数的方式将在执行地图函数时立即调用，即。当组件被渲染时。

您需要传递一个回调，这样 onChoosed 函数只会在您单击 CollectionOption 时调用。

所以，使用：

<CollectionOption onClick={() => props.onChoosed(collection.title)}>

而不是：

<CollectionOption onClick={props.onChoosed(collection.title)}>

映射时如何使用onClick

how to use onClick while mapping

javascript

onclick

reactjs