ReactJS返回承诺待定

Question

我的服务器代码如下。

router.get('/', (req, res) =>{
        
    const location = require('mongoose').model('listenerslocation');
    location.find({},'location').limit(10).exec(function(err,result) {
        if(err){
            res.send(err)
        }
        console.log(result)
       // string = "eqfeed_callback('features':["+result+"])";
        res.json(result);
        
    });

});

它是从我的reactjs应用请求的。

 async componentDidMount(){
    const url = "http://localhost:3010/api";
    const response = await fetch(url);
    const data = response.json();
    this.setState({heat: data})
    console.log(data); 
  }

但是，我得到的只有promise - pending，但是我看到的却是所有数据。

问题是它不会再走下去（状态不会更新，也不会加载页面）。

Page.js

import React, { Component } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

export default class Heatmap extends Component {
  state = {
    loading: true,
    heat: null,
  }

  async componentDidMount(){
    const url = "http://localhost:3010/api";
    const response = await fetch(url);
    const data = response.json();
    this.setState({heat: data})
    console.log(data); 
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.heat ? (<div>Loading...</div>) : (<LoadScript
        googleMapsApiKey="AIzaSyB65TiJzvcRXQ0XyDt_0B8IyX2CqYLEnQI"
      >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
      </LoadScript>)}
        </div>

      
    )
  }
}