javascript - 如何访问 map 函数中变量的值？

Question

在我的 React 应用程序中，我用数组中的数据填充表格行。

下面，我希望能够在单击年份 td 时访问 notes 变量的值

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

当我点击屏幕上显示 1999 的 td 时，undefined 被输出到控制台。

有人可以帮助我了解如何访问此值吗？

Answer 1

此代码失败，为什么？

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

具体来说，onClick={(row) => console.log(row.year)}

你假设当你点击时你得到 row 作为 onClick 回调中的参数，你得到的是事件。因此，您的 row 参数是一个没有 year 的事件，因此您会看到 undefined。

解决方案:

只需删除行。

onClick={(clickEvent) => console.log(row.year)}

在箭头函数中，您可以访问 row 对象。