我如何知道在 React 中点击了哪个数据条目？

Question

我正在从一个 API 中获取数据，它给我一个对象数组。每个对象都包含一些基本的用户信息，如名字、姓氏、电子邮件等。

API response: [{first_name:"",...}, {first_name:"",...}, {first_name:"",...}]

从 API 获取数据后，我将其设置为名为 'data'

的状态

我正在通过这段代码渲染对象数组：

const renderData = () => {
    var rows = [];
    for (var i = 0; i < data.length; ++i) {
        rows.push(
            <tr key={i}>
                <td>{i+1}</td>
                <td>{data[i].first_name}</td>
                <td>{data[i].last_name}</td>
                <td>{data[i].email}</td>
                <td>{data[i].states}</td>
                <td>{data[i].city}</td>
                <td>{data[i].pincode}</td>
                <td className="action-btns">
                    <a className="edit-btn" href="/edit">EDIT</a>  // Notice this line
                    &nbsp;
                    <a className="delete-btn" href="/delete">DELETE</a>
                </td>
            </tr>
        );
    }
    return (
        <tbody>
            {rows}
        </tbody>  
    );
}

renderData 在 table 的某处被调用：

export default MyComponent() {
    return() {
        <table>
            <thead>...</thead>
            {renderData()}  // notice this line
        </table>
    }
}

现在你可能已经注意到我有 EDIT 和 DELETE button/link，只要用户点击 EDIT，我们就会转到 /edit url 然后我们使用 React router 渲染一个组件。我想将数据传递给另一个采用单个用户道具对象的组件，该组件是一种表单，它将使用提供的道具预填充数据。但是我怎么知道哪个对象的编辑按钮被点击了

我尝试了一些天真的事情，例如：

<a onClick={() => setNumber(i)} className="edit-btn" href="#">EDIT</a> // Notice the onClick event

我想如果 i 是 for 循环中的值，只有当我知道数据中数组的哪个元素被单击时，也许我可以将它作为道具传递。我不知道该怎么做。但是使用这种方法只给我 11，这是从 API.

中检索到的数组 'data' 的长度

<Router>
    <Switch>
        <Route exact path="/" component={App} />
        <Route path="/add" component={Add} />
        <Route path="/edit" component={Add(props)} /> // How do I pass props here from Add.js to Main.js
    </Switch>
</Router>

Answer 1

它给你数组的长度，因为在 i 上有一个闭包，请改用 let i。更多详细信息 here。但是存储索引可能不是一个好主意，特别是如果你说之后从数组中删除元素，这可能会使你存储的索引无效。

不是存储索引，而是将 data[i] 本身存储在状态中（例如，被点击的项目）。

() => setClickedItem(data[i])

此外，如果您的 renderData 函数中有钩子，您可能需要将 renderData 更改为组件 RenderData 并将其用作 <RenderData/> 而不是调用就像你现在的功能一样。否则如果你把它当作函数来调用，里面有钩子，react 会认为那些钩子属于父组件，可能会发生意想不到的事情。

我如何知道在 React 中点击了哪个数据条目？

How do I know which data entry has been clicked in React?

javascript

reactjs

react-hooks

react-state