React js onclick 函数在不应该触发的地方触发

Question

我在表格内添加了一个单击事件侦听器按钮，但它无法正常工作 它在填充数据时不断触发。

填充数据时的控制台

清洁控制台后，我单击了按钮 但当我点击这些按钮时没有显示任何内容

这是下表的功能

function FilterTable(props){
    const filterData=props.data;
    const clickEvent=(id)=>{ console.log('click event triggered',id)}
    //console.log(filterData)
    const ids=filterData.map((item,index) =>(item[Object.keys(item)[0]]))
    const firstdata=filterData[0]
    //console.log(ids)
    const cols=Object.keys(firstdata)
    cols.shift()
    
    return(
        <div className="foot-body ">
            <div className="table-col">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        {props.column.map((item,index) =>(
                            <th>{item}</th>
                        ))} 
                    </tr>                   
                </thead>
                <tbody>
                    {filterData.map((item,index) =>(
                        <tr  id={ids[index]}>
                            <td>
                                <button onClick={clickEvent(ids[index])}>Select</button>
                            </td>
                            {cols.map((obj,inx)=>(
                                <td dangerouslySetInnerHTML={{__html:item[obj]}}></td>
                                
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
            </div>
        </div>
    )
}

参数中传入的数据为

[
    {
        "custid": 1001,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "example",
        "Contactno": "9999999999",
        "emailid": "[email protected]",
        "addressLine1": "1234 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1002,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "example",
        "Contactno": "9999999888",
        "emailid": "[email protected]",
        "addressLine1": "123 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1003,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "eg a",
        "Contactno": "9876543210",
        "emailid": "[email protected]",
        "addressLine1": "12374 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1004,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "eg",
        "Contactno": "9987564789",
        "emailid": "[email protected]",
        "addressLine1": "1237 address Example",
        "addressLine2": null,
        "addressLine3": null
    }
]

Answer 1

我在

找到了答案

React onClick 函数在渲染时触发

原来我调用这个函数是错误的