为钩子问题中的每个元素调用的函数

Question

我有一个函数，调用一个函数，从钩子插入一个组件的每个对象，钩子是由API填充的所有工作都很好，但问题是这个映射是触发每当我改变史密斯在页面上也如果我输入一个文本，我不希望这种情况发生，我想要它只有当我有我的值从我的DB。

const test = () => {
dbServices.map(serv => {
serv.action = action(serv._id)
})
}

useEffect(() => {
getServices()
}, [])

test()

这是我的动作

const action = (id) => {
console.log("test")
return (
<>
<a onClick={() => { newpop(id) }} className="mr-3 text-primary">
<i className="mdi mdi-pencil font-size-18 mr-3" id="edittooltip" />
<UncontrolledTooltip placement="top" target="edittooltip">
Edit
</UncontrolledTooltip>
</a>
<a onClick={() => delService(id)} className="text-danger">
<i className="mdi mdi-close font-size-18 mr-3" id="deletetooltip" />
<UncontrolledTooltip placement="top" target="deletetooltip">
Delete
</UncontrolledTooltip>
</a>
</>
)
}

Answer 1

不要调用test，让你的主渲染函数包含这样的jsx代码:

return(
dbServices.map(({id}) => 
<>
<a onClick={() => { newpop(id) }} className="mr-3 text-primary">
<i className="mdi mdi-pencil font-size-18 mr-3" id="edittooltip" />
<UncontrolledTooltip placement="top" target="edittooltip">
Edit
</UncontrolledTooltip>
</a>
<a onClick={() => delService(id)} className="text-danger">
<i className="mdi mdi-close font-size-18 mr-3" id="deletetooltip" />
<UncontrolledTooltip placement="top" target="deletetooltip">
Delete
</UncontrolledTooltip>
</a>
</>
)
)

那么当你的状态更新时，你的渲染也会自动更新。