React表格内按钮onClick事件触发异常问题求助

问题现象 #

• 填充表格数据时，控制台自动持续打印click event triggered相关日志
• 清理控制台后点击按钮，无任何响应，控制台无输出

表格组件代码 #

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": "cexamplea@example.com",
        "addressLine1": "1234 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1002,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "example",
        "Contactno": "9999999888",
        "emailid": "cexampleb@example.com",
        "addressLine1": "123 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1003,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "eg a",
        "Contactno": "9876543210",
        "emailid": "cexamplec@example.com",
        "addressLine1": "12374 address Example",
        "addressLine2": null,
        "addressLine3": null
    },
    {
        "custid": 1004,
        "firstname": "<mark>Cu</mark>stomer",
        "lastname": "eg",
        "Contactno": "9987564789",
        "emailid": "cexampled@example.com",
        "addressLine1": "1237 address Example",
        "addressLine2": null,
        "addressLine3": null
    }
]

问题原因与修复 #

核心问题 #

绑定onClick时直接执行了clickEvent(ids[index])，这会导致组件渲染阶段就立刻调用函数，触发日志打印；同时因为这个调用没有返回可执行的函数给onClick，所以点击按钮时没有回调执行，自然无响应。

修复方法 #

有两种常用修复方式：

方式1：用箭头函数包裹回调

将按钮的onClick改为箭头函数，确保点击时才执行：

<button onClick={() => clickEvent(ids[index])}>Select</button>

方式2：让clickEvent返回一个函数

修改clickEvent的定义，使其返回一个可执行的函数：

const clickEvent=(id)=>()=>{ 
    console.log('click event triggered',id)
}
// 按钮绑定不变：
<button onClick={clickEvent(ids[index])}>Select</button>

优化后的完整代码 #

（同时给循环渲染的元素加上key属性，符合React最佳实践）

function FilterTable(props){
    const filterData = props.data;
    const clickEvent = (id) => () => { 
        console.log('click event triggered', id)
    }
    const ids = filterData.map(item => item[Object.keys(item)[0]])
    const firstdata = filterData[0]
    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 key={index}>{item}</th>
                        ))} 
                    </tr>                   
                </thead>
                <tbody>
                    {filterData.map((item, index) =>(
                        <tr key={ids[index]} id={ids[index]}>
                            <td>
                                <button onClick={clickEvent(ids[index])}>Select</button>
                            </td>
                            {cols.map((obj, inx)=>(
                                <td key={inx} dangerouslySetInnerHTML={{__html: item[obj]}}></td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
            </div>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者ayush jain