我的想法是當滑鼠進入專案時，提取專案，它將更新元素并更改其文本，這里是代碼：
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(true)}
onm ouseLeave={() => setOver(false)}
>{overEffect ? name : ""}</li>)
但是當滑鼠懸停在該專案上時，所有其他專案也會發生變化。我該怎么辦？
謝謝
uj5u.com熱心網友回復：
還要在 mouseOver 上保存專案的索引，然后使用當前的 mouseOver 專案檢查保存的索引。
uj5u.com熱心網友回復：
您還需要為滑鼠懸停的專案保存專案的 id
skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver({value:true,id})}
onm ouseLeave={() => setOver({value:false,id})}
>
{(overEffect.value&&overEffect.id) ? name : ""}</li>)
uj5u.com熱心網友回復：
如果您只需要更改一項，那么您只能有一種狀態來顯示滑鼠將被覆寫的專案的索引。所以你可以這樣做
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(index)}
onm ouseLeave={() => setOver(-1)}
>{overEffect === index ? name : ""}</li>)
或與 ids 相同的東西
{skillItems.map((item, index) => {
const { id, name} = item;
return (
<li
key={id}
className="singleChart"
onMouseOver={() => setOver(id)}
onm ouseLeave={() => setOver(null)}
>{overEffect === id ? name : ""}</li>)
uj5u.com熱心網友回復：
在這種情況下，您需要更復雜的狀態物件。我使用一個物件來保持串列中每個專案的狀態。一種方法是這樣的：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 })}
onm ouseLeave={() => setOver({ ...overEffect, [key]: true })}
>
{overEffect[key] ? name : ""}
</li>
);
})}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/322066.html
標籤：javascript 数组 反应