React中状态更新时Plotly.js组件未重新渲染的问题排查

问题重现 #

在React应用中使用react-plotly.js渲染图表，通过Zustand store管理data与layout状态。点击按钮获取新数据并更新状态后，Plot组件并未渲染新数据。相关代码如下：

store.js #

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

const useStore = create(immer((set) => ({
  data: [
    {
      x: [1, 2, 3, 4, 5],
      y: [2, 6, 3, 8, 5],
      type: 'bar',
      marker: { color: 'blue' },
    },
  ],
  layout: {
    width: 700,
    height: 400,
    title: 'A Different Plot',
  },
  setData: (newData) => set((state) => {
    console.log("Updating data:", newData);
    state.data = newData;
  }),
  setLayout: (newLayout) => set((state) => {
    console.log("Updating layout:", newLayout);
    state.layout = newLayout;
  }),
})))

export default useStore

App.jsx #

import { useEffect } from 'react'
import Plot from 'react-plotly.js'
import useStore from './store'
import './App.css'

function App() {
  const data = useStore(state => state.data)
  const layout = useStore(state => state.layout)
  const setData = useStore(state => state.setData)
  const setLayout = useStore(state => state.setLayout)

  const fetchData = async () => {
    console.log("Fetching data...");
    const fakeData = [
      {
        x: [1, 2, 3, 4, 5],
        y: [2, 6, 3, 8, 5],
        type: 'bar',
        marker: { color: 'blue' },
      },
    ];
    const fakeLayout = {
      width: 700,
      height: 400,
      title: 'A Different Plot 5',
    };

    setData(fakeData);
    setLayout(fakeLayout);
    console.log("Data fetched and set:", { fakeData, fakeLayout });
  };

  useEffect(() => {
    if (data && layout) {
      console.log("Data and layout are ready!");
    }
  }, [data, layout]);

  return (
    <>
      <button onClick={fetchData}>Load Plot</button>
      {data && layout ? (
          <Plot key={JSON.stringify({ data, layout })} data={data} layout={layout} />
      ) : (
        <p>Loading...</p>
      )}
    </>
  )
}

export default App

已尝试给Plot组件添加key属性强制重渲染，但仍无法更新新数据。

问题分析 #

1. 测试数据无实际变化：当前fetchData中的fakeData与初始data的内容完全一致，仅layout的title有变化。即使状态更新，data的内容未发生改变，可能导致react-plotly.js内部的浅比较逻辑认为无需更新图表。
2. Plot组件的更新机制：react-plotly.js的Plot组件依赖props的实际内容变化来触发重渲染，若仅引用变化但内容未变，可能不会触发更新。

解决方案 #

1. 确保测试数据存在实际差异 #

修改fetchData中的fakeData，使其与初始数据有明显区别，比如修改y轴数据或颜色：

const fetchData = async () => {
  console.log("Fetching data...");
  const fakeData = [
    {
      x: [1, 2, 3, 4, 5],
      y: [5, 3, 8, 2, 6], // 修改y轴数据
      type: 'bar',
      marker: { color: 'red' }, // 修改颜色
    },
  ];
  const fakeLayout = {
    width: 700,
    height: 400,
    title: 'A Different Plot 5',
  };

  setData(fakeData);
  setLayout(fakeLayout);
  console.log("Data fetched and set:", { fakeData, fakeLayout });
};

2. 优化Zustand状态更新（可选） #

虽然使用Immer中间件时直接赋值state.data = newData是正确的，但可以显式返回新状态来确保不可变性（避免潜在的引用问题）：

setData: (newData) => set({ data: newData }),
setLayout: (newLayout) => set({ layout: newLayout }),

（注：使用Immer时两种写法都有效，此为可选优化）

3. 移除冗余的key属性 #

依赖key强制重渲染并非最优解，若props本身有实际变化，Plot组件应自动更新。移除key属性，让组件基于props变化自然渲染：

<Plot data={data} layout={layout} />

4. 手动触发Plot更新（兜底方案） #

若上述方法仍无效，可通过useEffect监听data和layout的变化，手动调用Plotly的更新方法。需要给Plot组件添加ref：

import { useEffect, useRef } from 'react'

function App() {
  const data = useStore(state => state.data)
  const layout = useStore(state => state.layout)
  const setData = useStore(state => state.setData)
  const setLayout = useStore(state => state.setLayout)
  const plotRef = useRef(null)

  useEffect(() => {
    if (plotRef.current && data && layout) {
      plotRef.current.update(data, layout)
    }
  }, [data, layout])

  // ...其余代码不变

  return (
    <>
      <button onClick={fetchData}>Load Plot</button>
      {data && layout ? (
          <Plot ref={plotRef} data={data} layout={layout} />
      ) : (
        <p>Loading...</p>
      )}
    </>
  )
}

验证步骤 #

1. 修改fakeData后点击按钮，检查控制台是否输出Data and layout are ready!，确认组件已重新渲染。
2. 观察图表是否更新为新的y轴数据和颜色，标题是否变为A Different Plot 5。

内容的提问来源于stack exchange，提问作者Mohit Kumar