Chart behaves identical whether it's dumb (no state) or whether it has state

未关闭
  • 哪里不对？
#309 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
文档
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript, react
领域
data-visualization, documentation

调研方向

该 issue 没有指出任何 repository 文件或测试；请先定位文档中关于 “dumb” 组件的段落，并将其与两个 React 示例进行比较。复现报告中的 pan、zoom、rerender 和 resize 行为，然后在确认预期行为后，阐明该警告或记录预期的区别。

由索引模型根据 Issue 内容生成。

描述

The docs state that: This is a "dumb" component that doesn't merge its internal state with any updates. This means that if a user interacts with the plot, by zooming or panning for example, any subsequent re-renders will lose this information unless it is captured and upstreamed via the onUpdate callback prop.
But the following two pieces of code behave identically:

  • without state:
function StackedAreaChart({) {
  const layout = {
    showlegend: true,
    legend: {
      x: 0,
      y: -0.15,
      orientation: "h",
      traceorder: "normal",
      yanchor: "top",
    },
    autosize: true,
    margin: { pad: 10, b: 10, l: 40, r: 40, t: 80 },
  };

  const plotData = [...someData]

  return (
    <div style={{ height: 650 }} data-cy="stacked-area-chart">
      <Plot
        data={plotData}
        layout={layout}
        style={{ width: "100%", height: "100%" }}
        useResizeHandler
      />
    </div>
  );
}
export default StackedAreaChart;
  • and with state:
function StackedAreaChart() {
  const [chart, setChart] = useState({
    data: [],
    layout: {
      showlegend: true,
      legend: {
        x: 0,
        y: -0.15,
        orientation: "h",
        traceorder: "normal",
        yanchor: "top",
      },
      xaxis: { range: [2000, 2019] },
      autosize: true,
      margin: { pad: 10, b: 10, l: 40, r: 40, t: 80 },
    },
    config: { responsive: true },
  });

  useEffect(() => {
    const plotData = [...someData];

    setChart((prevState) => ({
      ...prevState,
      data: [...plotData],
    }));
  }, [setChart, data]);

  return (
    <div style={{ height: 650 }} data-cy="stacked-area-chart">
      <Plot
        data={chart.data}
        layout={chart.layout}
        config={chart.config}
        style={{ width: "100%", height: "100%" }}
        useResizeHandler
      />
    </div>
  );
}
export default StackedAreaChart;

I can pan and zoom and then double click to return to its initial state on both codes. I can also modify the viewport width, making the chart to resize, while zoomed in and the chart still behaves perfectly.

I don't understand the warning in the documentation.
Am I doing something wrong ?

主要语言
JavaScript
星标
1.1k
派生
138
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

plotly/react-plotly.js 的其他 Issue

查看 plotly/react-plotly.js 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。