更新地图循环中的特定项目
更新地图循环中的特定项目
提问于 2021-10-18 08:08:28
我的想法是，当鼠标进入项目，提取项目时，它将更新元素并更改其文本，以下是代码：
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(true)}
onMouseLeave={() => setOver(false)}
>{overEffect ? name : ""}</li>)但当鼠标移到该项目上时，所有其他项目也会发生变化。我该怎么办？
谢谢你
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-10-18 08:52:07
在这种情况下，您需要更复杂的状态对象。我使用一个对象来保存列表中每一项的状态。一种方法是这样做：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
);Stack Overflow用户
发布于 2021-10-18 08:17:34
您还需要为鼠标悬停的项目保存该项目的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>)Stack Overflow用户
发布于 2021-10-18 09:25:49
如果您只需要更改一个项，那么您只能有一个状态，该状态将显示将覆盖one的项的索引。所以你可以这样做
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(index)}
onMouseLeave={() => setOver(-1)}
>{overEffect === index ? name : ""}</li>)或者与ids相同的事情
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(id)}
onMouseLeave={() => setOver(null)}
>{overEffect === id ? name : ""}</li>)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69612695
复制相关文章
相似问题
腾讯云开发者
