Javascript 映射时如何使用onClick

有人能帮我更正这个密码吗 我想在映射的数据上使用onClick，但每次页面呈现时都会运行onClick：| 我的意思是，我单击时它不会运行，但每次页面渲染时它都会运行。 请检查收集选项部分

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;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“../../styles/ModalSubHeader”导入ModalSubHeader；
从“../../styles/CollectionHolder”导入CollectionHolder；
从“./../styles/CollectionOption”导入{CollectionOption，CollectionOptionInner}”；
从“../../styles/CollectionIcon”导入CollectionIcon；
从“../../../../../images/index”导入集合图标；
功能集合（道具）{
常量[collectionList，setCollectionList]=useState（null）；
useffect（（）=>{
axios
.get（“https://reg.my-waste.mobi/collections?project_id=556&district_id=556&zone_id=zone-z1250-z1261“）
。然后（{data}）=>{
const collections=Object.values（data.collection.types）.map（collection=>
{collection.title}
);
setCollectionList（集合）
})        
console.log（CollectionIcons）；
}, [])
返回(
您希望提醒哪些类型的收藏或活动？
{collectionList}
)
}
导出默认集合；

这是因为在执行

映射时，您会立即显式调用
onClick
处理程序

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

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

props.onChoosed（collection.title）}>

也可以考虑在代码< >代码>中使用<代码>键<代码>，这样您可以避免不必要的重新呈现。
 < p>您提供函数的方式，当map函数被执行时，将立即调用它。当组件被渲染时。

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

因此，请使用：

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

props.onChoosed（collection.title）}>

而不是：

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

您的应用程序可能会崩溃，消息
超出了最大调用堆栈大小