怎么改一下从服务器fetch异步取数据，我取下来没法更新graph？

[SeekPoint]

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { data } from './data';
import G6 from '@antv/g6';

export default function () {
const ref = React.useRef(null);
let graph = null;

useEffect(() => {

const dataUrl = "http://127.0.0.1:8000/visg6/json_res";

fetch(dataUrl)  //fdata is a promise
    .then(response => response.json())
    .then(data => {
      setData(data.message)
      console.log("fetched data is:", data); //**能看到**
    },[]);
console.log('---yk--- from server:', data);// **并不会渲染，**


if (!graph) {
  graph = new G6.Graph({
    container: ReactDOM.findDOMNode(ref.current),
    width: 1200,
    height: 800,
    modes: {
      default: ['drag-canvas'],
    },
    layout: {
      type: 'dagre',
      direction: 'LR',
    },
    defaultNode: {
      type: 'node',
      labelCfg: {
        style: {
          fill: '#000000A6',
          fontSize: 10,
        },
      },
      style: {
        stroke: '#72CC4A',
        width: 150,
      },
    },
    defaultEdge: {
      type: 'polyline',
    },
  });
}
graph.data(data);
graph.render();

}, []);

return

;
}