警告：可以在未数的组件上呼叫SetState（reactjs功能组件，kendoreact）

Question

你能帮我解决这个警告吗？

我刚刚编写了一些“可能”与之相关的代码。我正在使用 KendoReact 图表组件，
在圆环图上，有一个功能可以在图表中间写入属性名称为“donutCenterRender”的内容。我用它来显示 api 上的总数据。一切都很顺利，但是我发现了警告，所以我尝试调查我的代码是否有问题

const { menuItem, chartApi, listApi } = props;
const [auctionData, setAuctionData] = useState(chartApi);
const [auctionId, setAuctionId] = useState(1);
const [auction, setAuction] = useState(auctionData[auctionId]);
const [Total, setTotal] = useState(0);

//... code

  useEffect(() => {
    const data = auction;
    let Total = 0;

    data.forEach(e => {
      Total += e.total;
    });
    setTotal(Total);
  }, []);

  const donutCenterRenderer = () => {
    return (
      <span>
        <h1>{Total}</h1> Total
      </span>
    );
  };

return (
//...code
      <div className="dash-chart d-flex flex-column bg-transparent">
        <Chart donutCenterRender={donutCenterRenderer}>
          <ChartArea background="transparent" />
          <ChartSeries>
            <ChartSeriesItem
              type="donut"
              data={auction}
              categoryField="status"
              field="total"
              holeSize={60}
              border={{ width: 20 }}
            />
          </ChartSeries>
          <ChartLegend
            position="bottom"
            margin={{ bottom: 20 }}
            orientation="vertical"
            labels={{
              margin: 5,
              content: e => `${e.text} \n ${e.value} Auctions`,
            }}
          />
        </Chart>
      </div>
//...code

谢谢