反应钩子点击列表项

Question

我有一个列表，我想设置"onClick"功能，单击每个项目然后显示项目的详细信息。 但是我的函数返回了未定义的对象 我使用了反应钩子和功能组件

这是我的代码

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

回调函数中的i参数表示传递给回调的事件，通过命名该变量i可以防止回调使用外部作用域中的i。

你需要删除回调函数的i参数：

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

或将其重命名为其他名称：

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