使用地图生成元素时反应更改useState不渲染组件答案

【问题标题】：React changing useState not rendering component when using map to generate elements使用地图生成元素时反应更改useState不渲染组件
【发布时间】：2021-12-29 23:41:34
【问题描述】：

这是我的情况，我正在加载 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 的颜色都会更改？某些东西没有在这里触发元素的渲染周期..我在这里缺少什么？

【问题讨论】：

你在哪里调用 loadSVG 在你的代码中？看起来该州未填充。

标签： javascript reactjs svg react-hooks

【解决方案1】：

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

【讨论】：