這是我的情況，我正在加載 SVG 檔案并將其渲染到螢屏上。我想更改 svg 檔案的顏色。（svg 檔案包含 500 個物件）
一切正常，似乎狀態已更改但未呈現組件。我認為這是因為我正在使用地圖來生成元素 - 這是我的代碼：
const Sim = () => {
const [elements, setElements] = useState([]);
const loadSVG = (e) => {
...
...
newElements = newElements.map(x=> ({
data: x,
color: '#0a22a0'
}))
setElements(newElements)
};
}
const rndColors = () => {
elements.forEach(x=> {
x.color = "#" Math.floor(Math.random()*16777215).toString(16);
})
setElements(elements)
console.log(elements)
}
return (
<div>
<Button style={{marginBottom: 10, maxHeight: 20}} size="small" variant="outlined" onClick={rndColors}>RND Colors</Button>
<svg
viewBox="0 0 2000 2000"
version="1.1"
x="0px"
y="0px"
style={{maxHeight:700}}
>
{elements.map((x,i) =>
<SVGElement
data={x.data}
index={i}
color={x.color}
/>)
}
</svg>
</div>
)
}
我可以在日志中清楚地看到顏色已更改，但實際 svg 顏色未更改（僅在我更改代碼中的某些內容后頁面重繪 - 我可以看到新顏色）
我如何確保一旦我點擊按鈕，svg 的所有顏色都會改變？這里沒有觸發元素的渲染周期..我在這里錯過了什么？
uj5u.com熱心網友回復：
elements.forEach((x) => {
x.color = "#" Math.floor(Math.random() * 16777215).toString(16);
});
setElements(elements);
您正在改變上面的狀態，您應該始終以不可變的方式更新狀態。您可以將上面的代碼重寫為：
setElements(
elements.map((x) => ({
...x,
color: "#" Math.floor(Math.random() * 16777215).toString(16),
}))
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361061.html
標籤：javascript 反应 svg 反应钩子