Nivo折线图更新数据后为什么没有重新渲染？

书生シ新杰提问于 2026-02-11 12:27:35 阅读 31

交互

我用Nivo的Line组件做动态数据展示，用useState维护数据，但修改数据后图表没变化。虽然console.log显示数据更新了，但折线图还是老数据。试过强制设置key值和调用forceUpdate都不行，这是什么情况啊？

我的代码结构大概是这样的：


import { Line } from '@nivo/line';

function Chart() {
    const [data, setData] = useState(initialData);
    // ...数据更新逻辑
    return (
        <Line
            data={data}
            keys={['value']}
            indexBy="date"
            // 其他配置
        />
    );
}

控制台没有报错，但新数据始终不显示。是不是需要手动触发重绘？或者Nivo的某个配置没设置对？

我来解答赞 5 收藏

反馈

1 条解答

设计师广云 Lv1

你这问题我之前也踩过坑，大概率是数据引用没变导致的。Nivo图表组件靠浅比较来判断数据是否更新，如果你直接修改原数组或者用同一个引用，它就以为数据没变，自然不重绘。

关键点在于每次更新数据时得创建新对象，不能直接push或修改原数组。比如你可能是这样更新的：

data[0].value.push(newPoint)

这就坏事了，应该换成结构化更新：

setData(prev => prev.map(item => {

    if (item.id === 'your-series') {

        return { ...item, data: [...item.data, newPoint] }

    }

    return item

}))

或者干脆整个数据都换新引用：

const newData = JSON.parse(JSON.stringify(data))

// 修改newData然后setData(newData)

但推荐第一种函数式更新方式，更稳妥。还有个小技巧可以验证是不是这个问题：给Line组件加个key，比如key={Date.now()}，如果加上就刷新了，那基本确定就是引用没变的问题。

另外确认下你的数据结构对不对，每个series的data数组里应该是{ x, y }这种格式，indexBy对应x字段。改完记得看下控制台有没有warning。

希望能帮到你，这个真挺容易懵的，看着数据变了但图不动，查半天才发现是引用搞的鬼。

2026-02-11 12:30