无法在反应映射函数中将活动类添加到组列表项

Question

嗨，请帮助我处理这个，当我悬停在由react map()渲染的组列表项上时，它会将活动类设置为所有项而不是我选择的项。这是代码:

const LeftPanel = (props) => {
let [initState, setInitState] = useState();
let [addActive, setAddActive] = useState();

fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(json => setInitState(json));

const hoverOn = () =>{
setAddActive(true);
} 
const hoverOff = () =>{
setAddActive(false);
}  

return ( 

<div>
<div>
<div className="list-group" id="list-tab" role="tablist">
{initState && 
initState.map(item =>(    
<Link className={addActive ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action'} 
to="#"  onMouseEnter={hoverOn} onMouseLeave={hoverOff} key={item.id}
>
{item.title}  
</Link>
))
}
</div>
</div>
</div>
);

}

Answer 1

你需要设置一些东西来知道哪个项目将被添加到一个类中，这里是item.id

import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
let [initState, setInitState] = useState();
let [addActive, setAddActive] = useState({
class: null,
index: null
});
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => response.json())
.then((json) => setInitState(json));
}, []);
const hoverOn = (e) => {
setAddActive({
index: parseInt(e.currentTarget.dataset.id),
show: true
});
};
const hoverOff = (e) => {
setAddActive({
index: parseInt(e.currentTarget.dataset.id),
show: false
});
};
return (
<div>
<div>
<div className="list-group" id="list-tab" role="tablist">
{initState &&
initState.map((item, i) => (
<div
className={
addActive.index === item.id && addActive.show
? "list-group-item list-group-item-action active"
: "list-group-item list-group-item-action"
}
onMouseEnter={hoverOn}
onMouseLeave={hoverOff}
key={item.id}
data-id={item.id}
>
{item.title}
</div>
))}
</div>
</div>
</div>
);
}

Codesandbox