数据变化时自动更新 Plotly React Chart答案

【问题标题】：Automatically update Plotly React Chart when data changes数据变化时自动更新 Plotly React Chart
【发布时间】：2022-11-19 06:54:34
【问题描述】：

下面的反应代码呈现一个图表，当按下按钮时，该图表会使用其他数据进行更新。计数状态作为道具传递给 BarChart 函数。但是，图表不会在数据更改时自动更新。如何实现？

import React, { useState, useEffect } from 'react';
import Plot from 'react-plotly.js';
function main() {
  const [count, setCount] = useState([1,2,3]);
  return(
    <>
    <BarChart value={count}/>
    <button onClick={() => setCount([...count, 123])}/>
    </>
  )
}

const BarChart = (count) => {

    return (
        <div>
        <Plot
            data={[
                {type: 'scatter',
                x: ['one','two','three'],
                y: count,
                marker: {color: 'red'}
                }]}
            layout={{width: 1000, height: 500, title: "hello"}}
            
        />
    </div>
    )
}

【问题讨论】：

标签： reactjs plotly.js

【解决方案1】：

此代码不影响绘图数据。首先，您不能以这种方式将变量传递给子组件。你应该通过道具来做。它是一个存储标签属性值的对象，其工作方式类似于 HTML 属性。我重新编写了您的代码以使其更具可读性。

const App = () => {
    const [count, setCount] = useState([1, 2, 3]);
    return (
        <>
            <BarChart value={count} />
            <button
                onClick={() =>
                    setCount([...count, count.at(count.length - 1) + 1])
                }
            >
                Update
            </button>
        </>
    );
};

如果您单击Update 按钮，新项目将被推到它的末尾。接下来，计数数组作为value属性传递给BarChart组件。

如果您与情节互动，所有先前的信息都将丢失。解决方案是将绘图数据存储在状态变量中。初始x和y数据是从传递给绘图组件的count变量（props.value）收集的。

const BarChart = (props) => {
    const [settings, updateSettings] = useState({
        data: [
            {
                x: props.value,
                y: props.value,
                type: 'scatter',
                marker: { color: 'red' },
            },
        ],
        layout: { width: '100%', height: 500, title: 'hello' },
        frames: {},
        config: {},
    });
    useEffect(() => {
        updateSettings((settings) => ({
            ...settings,
            data: [{ ...settings.data[0], y: props.value, x: props.value }],
        }));
    }, [props.value]);
    return (
        <div>
            <Plot data={settings.data} layout={settings.layout} />
        </div>
    );
};

如果父组件中的count变量被改变，它会激活子组件（componentDidUpdate() or useEffect()）的更新事件。在这种情况下，我使用了useEffect()。如果 props.value 值已更改，则挂钩将始终执行。然后它将根据收集到的数据更新数据数组，并使用新数据重新绘制绘图。

【讨论】：