更新map循环中的特定项

Question

我的想法是当鼠标进入项目，提取项目时，它将更新元素并更改其文本下面是代码:

{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(true)}
onMouseLeave={() => setOver(false)}
>{overEffect ? name : ""}</li>)

但是当鼠标移到项目上时，所有其他项目也会改变。我该怎么办?

谢谢

Answer 1

在这种情况下，您需要稍微复杂一点的状态对象。我使用一个对象来保存列表中每个项目的状态。一种做法是这样的:https://codesandbox.io/s/https-stackoverflow-com-questions-69612695-update-the-specific-item-in-map-loop-69613214-69613214-z5o17?file=/src/App.js -请告诉我，如果这是你可以访问。

这里所做的是我们必须使用reduce方法构造状态对象，然后我们必须注意如何设置新状态(而不是覆盖某些内容)。

import React from "react";
function App() {
const skillItems = [
{
id: 1,
name: "111"
},
{
id: 2,
name: "222"
},
{
id: 3,
name: "333"
}
];
const stateObj = skillItems.reduce((acc, curr) => {
const keys = Object.keys(curr);
if (!acc) {
return Object.assign({}, { [keys[0] + curr.id]: true });
}
return Object.assign(acc, { [keys[0] + curr.id]: true });
}, null);
const [overEffect, setOver] = React.useState(stateObj);
console.log("overEffect", overEffect);
return (
<div className="App" style={{ backgroundColor: "pink" }}>
{skillItems.map((item, index) => {
const { id, name } = item;
const key = "id" + id;
return (
<li
key={id}
onMouseOver={() => setOver({ ...overEffect, [key]: false })}
onMouseLeave={() => setOver({ ...overEffect, [key]: true })}
>
{overEffect[key] ? name : ""}
</li>
);
})}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);

Answer 2

您还需要保存项目的id为鼠标在

上的项目

skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver({value:true,id})}
onMouseLeave={() => setOver({value:false,id})}
>
{(overEffect.value&&overEffect.id) ? name : ""}</li>)

Answer 3

如果你只需要改变一个项目，那么你只能有一个状态，该状态将显示鼠标将覆盖的项目的索引。所以你可以这样写

{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(index)}
onMouseLeave={() => setOver(-1)}
>{overEffect === index ? name : ""}</li>)

或者与id

相同

{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(id)}
onMouseLeave={() => setOver(null)}
>{overEffect === id ? name : ""}</li>)

Answer 4

同时保存mouseOver项目的索引，然后与当前mouseOver项目检查保存的索引