列表項中的 React Hooks onClick

Question

我有一個列表，我想設置'onClick' function 單擊每個項目然后顯示項目的詳細信息。 但是我的 function 返回 undefine object 我使用了反應鈎子和功能組件

這是我的代碼

 var listItem = data.map((i, index) => (<Item key={index}
    isRead={i['isRead']}
    image={i['image']}
    content={i['content']}
    time={i['time']}
    onClick={(i) => console.log('Click to',i.content)}
></Item>));
return (
    <div className="Conversation">
        <div className="ScrollDiv">
            {listItem}
        </div>

    </div>
);

結果在這里

Answer 1

回調 function 中的i參數表示傳遞給回調的事件，通過命名該變量i可以防止回調使用外部 scope 中的i 。

需要去掉回調function的i參數：

onClick={() => console.log('Click to',i.content)}

或將其重命名為其他名稱：

onClick={(event) => console.log('Click to',i.content)}