Skip to content

[Bug]: legend 的 itemValueText 属性在使用state动态计算时,当 state 变化后,计算的值未发生变化 #2913

@su-muzhi

Description

@su-muzhi

Describe the bug / 问题描述

legend 的 itemValueText 属性在使用state动态计算时,当 state 变化后,计算的值未发生变化
ps: 使用 g2 v5 版本也有同样的问题

import { Pie } from '@ant-design/plots';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const DemoPie = () => {
  const [data, setData] = useState([
    { type: '分类一', value: 27 },
    { type: '分类二', value: 25 },
    { type: '分类三', value: 18 },
    { type: '分类四', value: 15 },
    { type: '分类五', value: 10 },
    { type: '其他', value: 5 },
  ]);
  const dataRef = React.useRef(null);
  dataRef.current = data;

  const reloadData = () => {
    setData((pre) => {
      return [
        { type: '分类一', value: 27 * Math.random() },
        { type: '分类二', value: 25 * Math.random() },
        { type: '分类三', value: 18 * Math.random() },
        { type: '分类四', value: 15 * Math.random() },
        { type: '分类五', value: 10 * Math.random() },
        { type: '其他', value: 5 * Math.random() },
      ];
    });
  };

  const config = {
    data,
    angleField: 'value',
    colorField: 'type',
    innerRadius: 0.6,
    label: {
      text: 'value',
      style: {
        fontWeight: 'bold',
      },
    },
    legend: {
      color: {
        title: false,
        position: 'bottom',
        rowPadding: 5,
        itemLabelText: (d, index) => {
          console.log(dataRef.current[index]);
          return dataRef.current[index].value + '-1';
        },
      },
    },
    annotations: [
      {
        type: 'text',
        style: {
          text: 'AntV\nCharts',
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 40,
          fontStyle: 'bold',
        },
      },
    ],
  };
  return (
    <>
      <Pie {...config} />
      <button onClick={reloadData}>change data</button>
    </>
  );
};

createRoot(document.getElementById('container')).render(<DemoPie />);

Reproduction link / 复现链接

https://stackblitz.com/edit/react-ybiiygpj?file=index.js

Steps to Reproduce the Bug or Issue / 重现步骤

点击按钮可在控制台中看到数据已经发生了变化,但页面上通过 itemLabelText / itemValueText 计算出的值仍然为旧值

Version / 版本

Please select / 请选择

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions