使onHover只影响reactjs中的一个元素

Question

每次悬停字符串时，我都试图显示一个按钮，我所做的一切都很好，但当我悬停字符串时它会显示可用字符串中的每个按钮，我试图传递密钥，但它仍然不起作用，这是我的代码

const _showButton = () => {
setButton(true);
};
const _hideButton = () => {
setButton(false);
};
const _options = (uid) => {
return isButton ? <button key={uid}> ... </button> : null;
};

return(
{isProject.map((p) => {
return (
<div>
<Typography onMouseEnter={_showButton} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
})}
)

任何帮助都将不胜感激，谢谢之前，我知道这个问题以前可能已经被问过了，但我找不到像我这样使用函数而不是类的问题

Answer 1

看起来button状态只是一个布尔值，它控制着所有映射的元素。

所以你有两个选择，

首先，将button状态更改为阵列

const [ button, setButton ] = useState(Array.from({ length: isProject.length }, _ => false))

并将索引传递给功能，并使用特定的插槽来确定按钮是否应该是可见的

const _toggleButton = (i) => {
setButton(prev => prev.map((bool, idx) => i == idx ? !bool : bool);
};
const _options = (uid, i) => {
return button[i] ? <button key={uid}> ... </button> : null;
};
return(
{isProject.map((p, i) => {
return (
<div>
<Typography onMouseEnter={()=>_toggleButton(i)} onMouseLeave={()=>_toggleButton(i)}>
{p.title} {_options(p.uid, i)}
</Typography>
</div>
);
})}
)

第二个是重构映射到它自己的组件的elem，并在那里声明状态，这样每个elem都有自己的状态

{isProject.map((p) => <Component p={p} />  )}

function Component({p}) {
const [button, setButton] = useState(false)
const _showButton = () => {
setButton(true);
};
const _hideButton = () => {
setButton(false);
};
const _options = (uid) => {
return button ? <button key={uid}> ... </button> : null;
};
return (
<div>
<Typography onMouseEnter={_showButton} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
}

Answer 2

这是因为_option在map中运行并迭代整个列表，而状态是一个单独的状态，可以为每个项目启用它。你应该考虑设置"；p的uid"；in状态变量(而不是true/false(，并将uid与"in"中的状态进行比较_选项"；方法

const [selectedButtonUid, setSelectedButtonUid] = useState('');
const _showButton = (uid) => {
setSelectedButtonUid(uid);
};
const _hideButton = () => {
setSelectedButtonUid('');
};
const _options = (uid) => {
return selectedButtonUid === uid ? <button key={uid}> ... </button> : null;
};

return(
{isProject.map((p) => {
return (
<div>
<Typography onMouseEnter={()={_showButton(p.uid)}} onMouseLeave={_hideButton}>
{p.title} {_options(p.uid)}
</Typography>
</div>
);
})}
)