胜利事件未重新渲染图表

Question

我在项目中使用 Victory 进行数据可视化。但是，在我的图表中实现事件处理程序时，我注意到虽然它们更改了目标属性，但图表永远不会重新呈现，因此没有任何变化。

下面是来自 Victory 的 documentation 的示例，它在我的机器上不起作用：

<div>
  <h3>Click Me</h3>
  <VictoryScatter
    style={{ data: { fill: "#c43a31" } }}
    size={9}
    labels={() => null}
    events={[{
      target: "data",
      eventHandlers: {
        onClick: () => {
          return [
            {
              target: "data",
              mutation: (props) => {
                const fill = props.style && props.style.fill;
                return fill === "black" ? null : { style: { fill: "black" } };
              }
            }, {
              target: "labels",
              mutation: (props) => {
                return props.text === "clicked" ?
                  null : { text: "clicked" };
              }
            }
          ];
        }
      }
    }]}
    data={[{ x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 7 }]}
  />
</div>

经过一些调试，我可以确认组件的 data 和 labels 属性因 onClick 事件而更改，但这些更改实际上并未反映出来在图表中。有什么解决办法吗？

Answer 1

问题似乎是由 index.js 中的代码中的 <React.StrictMode> 引起的。删除它可以解决问题。我不太清楚为什么！！

胜利事件未重新渲染图表

Victory events not re-rendering chart

javascript

reactjs

victory-charts