我正在撰寫這個簡單的 Web 應用程式來顯示員工。為了顯示每個員工，我使用了一個Card組件，該組件根據員工數量在CardGrid組件中呈現。
我想要做的是用不同的背景值渲染每張卡片以提高視覺清晰度。我嘗試在 CardGrid 中存盤一個布爾狀態，該狀態由setState setter 方法切換，該狀態被傳遞到每張卡片并在每個單獨組件的渲染上呼叫。
我的問題是，不是卡片有不同的顏色，而是它們的顏色是相同的，但它會在兩個值之間快速滑動（癲癇警告哈哈）。
有誰知道我錯過了什么？為什么所有 Card 實體都共享狀態？
//CardGrid.js
export default function CardGrid(props){
const {data} = props;
const [colorSwitch, setColorSwitch] = useState(true)
return(
<div className="card-grid">
{data.map((d)=>
<Card
name={d.name}
lastName={d.lastName}
present={d.present}
time={d.time}
colorSwitch={colorSwitch}
setColorSwitch={setColorSwitch}
/>
)}
</div>
)
}
//Card.js
export default function Card(props){
const {name, lastName, present, time, colorSwitch, setColorSwitch} = props
useEffect(()=>{
setColorSwitch(!colorSwitch)
})
return (
<div
className="card"
style={present?(colorSwitch? {backgroundColor: "green"}:{backgroundColor: "red"}):{backgroundColor: "grey"}}>
<p className="card-text">{name} {lastName}</p>
</div>
)
}
uj5u.com熱心網友回復：
該useEffect鉤子缺少一個依賴陣列，并且無條件地將 React 狀態更新排入佇列。這意味著所有卡都使用相同的狀態值和渲染回圈（即“閃爍”）。似乎您只想在渲染時交替使用顏色/樣式。使用映射的陣列索引并交替使用偶數/奇數。
例子：
export default function CardGrid({ data }) {
return(
<div className="card-grid">
{data.map((d, index)=>
<Card
name={d.name}
lastName={d.lastName}
present={d.present}
time={d.time}
backgroundColor={index % 2 ? "red" : "green"} // evens = red, odds = gree
/>
)}
</div>
)
}
...
export default function Card({ name, lastName, present, time, backgroundColor }) {
return (
<div
className="card"
style={{ backgroundColor: present ? backgroundColor : "grey" }}
>
<p className="card-text">{name} {lastName}</p>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/505622.html
標籤：javascript 反应 反应钩子
上一篇：如何使用props作為組件？