reactjs - 未处理的拒绝（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

我的猜测是，当您从另一个文件<div id="container">导出时，它还没有安装和渲染。在组件安装和渲染后在 React 生命周期中执行chartData。fetch

转换为挂载时chartData可以从useEffect挂钩调用的函数。CustomerByRegion您还需要确保在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>
  );
};