使用 map 生成元素时反应更改 useState 不渲染组件

Question

这是我的情况，我正在加载 SVG 文件并将其渲染到屏幕上。 我想更改为 svg 文件的 colors。 （svg 文件包含 500 个对象）

一切正常，似乎 state 已更改，但未渲染组件。 我认为这是因为我使用 map 来生成元素 - 这是我的代码：

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>
    )
}

我可以在日志中清楚地看到 colors 已更改，但实际 svg 颜色没有更改（仅在我更改代码中的某些内容后，页面刷新 - 我可以看到新颜色）

我如何确保单击按钮后 svg 的所有 colors 都会被更改？ 某些东西没有在这里触发元素的渲染周期..我在这里缺少什么？

Answer 1

elements.forEach((x) => {
  x.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
});

setElements(elements);

您正在改变上面的 state，您应该始终以不可变的方式更新 state。 您可以将上面的代码重写为：

setElements(
  elements.map((x) => ({
    ...x,
    color: "#" + Math.floor(Math.random() * 16777215).toString(16),
  }))
);