如何在列表数组项中单击按钮只会使用 React 钩子影响相关项

Question

这是我面临的问题，当我得到 2 个项目列表时，如果我单击其中一个按钮，两个按钮都会被触发并执行重复查询，我知道有一种方法可以传递键的 objectId 来链接查询，但我不知道在这种情况下如何使用 react 钩子来实现这一点。

import React, { useState, useCallback } from 'react'
//click button will popup modal
function Test(){
const [data, setData] = useState([])
const open = useCallback(async ()=>{
const result = await = axios.post(
Url,
{ source: 'data'},
{
headers: header,
}
);
setData(result.data);
}, [])
return(   
<div>
{data == null
? " "
: data.map((i) => (
<List>
<ListItem>
<button onClick={open} key={i.objectId} >
button
</button>
{i.name}
</ListItem>
</List>
)}
</div>
)
}
export default Test

Answer 1

单击按钮上有一个打开的方法。您将在useCallback方法中获取一个事件对象。您可以使用它来防止两个按钮触发。您可以使用 e.stopPropagation(( 方法。

const open = useCallback(async (event)=>{
event.stopPropagation();
const result = await = axios.post(
Url,
{ source: 'data'},
{
headers: header,
}
);
setData(result.data);
}, [])