未处理的拒绝 (TypeError)：无法读取未定义的属性（读取 'appendChild'）

Question

我正在使用功能组件在 React.js 中制作 AntV 的等值线图。这是我的图表代码：

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

const CustomerByRegion = () => {
   const [chartData , setChartData] = useState(null);

  useEffect(() => {
    
    getChartData()
      .then(data => {
        setChartData(data)
      })
  } ,[] );

 const getChartData = () => {
  return fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json").then(res => res.json())
  .then(mapData => {
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
      padding: [55, 20]
    });
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
      shared: true,
    });
    chart.scale({
      longitude: {
        sync: true
      },
      latitude: {
        sync: true
      }
    });
    chart.axis(false);
    chart.legend('trend', {
      position: 'left'
    });
    const ds = new DataSet();
    const worldMap = ds.createView('back')
      .source(mapData, {
        type: 'GeoJSON'
      });
    const worldMapView = chart.createView();
    worldMapView.data(worldMap.rows);
    worldMapView.tooltip(false);
    worldMapView.polygon().position('longitude*latitude').style({
      fill: '#fff',
      stroke: '#ccc',
      lineWidth: 1
    });
  });
 }
  
  return isLoading ? (
      <Spinner />
    ) : (
        <div id="container">
          {chartData}
        </div>
    );
};

export default CustomerByRegion;

现在这段代码在 .jsx 文件中。

我在“const chart = new Chart()”中收到此错误。谁能告诉我解决方案或指导我走上正确的道路？附上错误图片。

Answer 1

我的猜测是，当您从其他文件导出 chartData 时，<div id="container"> 尚未安装和呈现。在组件挂载和渲染后，在 React 生命周期中执行 fetch。

将 chartData 转换为可以在 CustomerByRegion 安装时从 useEffect 挂钩调用的函数。您还需要确保 id="container" div 在效果为运行时安装，以便可以识别。

export const getChartData = () => {
  return fetch(.....)
    .then(.....)
};

客户按地区

import { useEffect, useState } from 'react';
import { getChartData } from "./chart";

const CustomerByRegion = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [chartData, setChartData] = useState();

  useEffect(() => {
    setIsLoading(true);
    getChartData()
      .then(data => setChartData(data))
      .finally(() => setIsLoading(false));
  }, []);
  
  return (
    <div id="container">
      {isLoading ? <Spinner /> : chartData}
    </div>
  );
};

未处理的拒绝 (TypeError)：无法读取未定义的属性（读取 'appendChild'）

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'appendChild')

typescript

reactjs

react-redux

antd

antv