未处理的拒绝(TypeError)：无法读取未定义的属性(读取“”appendChild“”)

Question

我正在使用功能组件在React.js中制作AntV的choropleth。以下是我的图表代码：

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">时，chartData还没有挂载和呈现。在组件挂载和呈现之后，在React生命周期中执行fetch。

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

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

CustomerByRegion

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>
  );
};