在React.js中通过数组映射的问题

如何解决在React.js中通过数组映射的问题

我是ReactJs的新手。我的项目正在从后端获取数据，其中包含一个单元格ID，然后将该单元格ID发送到另一个api，并接收该单元格ID的纬度和经度。为此，我必须存储每个单元格ID的位置。看来我能够将经纬度存储在this.state.loc中。但是，在通过该数组进行映射以在地图上放置标记时遇到了一个问题。在第一个代码块中，当我尝试将位置的纬度记录到控制台时，它仅记录了其中一个。

import React,{Component,useState,useEffect} from 'react';
import './App.css';
import {GoogleMap,withScriptjs,withGoogleMap,Marker,useLoadScript,InfoWindow} from "react-google-maps";







class App extends Component {
  
    constructor(props) {
        super(props);
        this.state = {
        users: [],loc:[{}]
        
            
        };
    }
    

  
    
  
    
   componentDidMount() {
    
        fetch('/users')
        .then(res=>res.json())
        .then(users=>this.setState({users}))
        .then(users=>this.state.users.map(user => {
                 
                                              
                                
            var num = user.CallingCellID
            if(num != null) {
                                                                                  
                                                                                  
                                var digits = (num).toString().split('');
                                var realDigits = digits.map(Number);
                                var mcc = 419;
                                var mnc = 4;
                                                                                  
                                var lac = (realDigits[6]*1000) + (realDigits[7]*100) + (realDigits[8]*10) + (realDigits[9]*1);
                                var cid = (realDigits[10]*10000)+ (realDigits[11]*1000) + (realDigits[12]*100) + (realDigits[13]*10) + (realDigits[14]*1);
                                fetch("https://api.mylnikov.org/geolocation/cell?v=1.1&data=open&mcc=419&mnc=4&lac="+lac+"&cellid="+cid)
                                .then(response => response.json())
                                .then(result=> {
                                const locations = result.data;
                                      
                                if(locations.lat != undefined) {
                                      
                                var x = [{lat: locations.lat,lng: locations.lon}];
                                      
                                Promise.all(x).then(data => {this.setState({ loc: data })})
                                      
                                }
                                                                                        
                                                                                        
                                });
                                                                                  
                                                                                  
                                                                                  
                }
          }));
    }
    
                                              

    
    
    
  
    
    
    render() {

        const MyMapComponent = withScriptjs(withGoogleMap((Map) =>
                            <GoogleMap defaultZoom={2} defaultCenter={{ lat: -34.397,lng: 150.644 }}>
                                   {this.state.loc.map(l=>console.log(l.lat))}                     
                                                          
                                </GoogleMap>))

 
        

    return (
            
            <div className="App">
            <header className="App-header">
            <form>
            <label for="Location Search"> Location Search: </label>
            <input type = "text" id = "Location Search" name = "Location Search"/>
            
            <label for="Account Search"> Account Search: </label>
            <input type = "text" id = "Account Search" name = "Account Search"/>
            <label for="IMSI Search"> IMSI Search: </label>
            
            <select id="IMSI Search" name="IMSI">

           <option value="1">1</option>)
            </select>
            
            <label for="IMSI RANGE:"> IMSI RANGE </label>
        
            <input type = "text" id = "IMSI RANGE" name = "IMSI RANGE"/>
            <input type = "text" id = "IMSI RANGE2" name = "IMSI RANGE2"/>
            
            
            </form>
            
            <div id = "googlemap">
            
            <MyMapComponent
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCa3cfZfuFgpKPUWpXZv7WejZ7u_093A3s"
            loadingElement={<div style={{ height: `800px` }} />}
            containerElement={<div style={{ height: `1500px` }} />}
            mapElement={<div style={{ height: `800px` }} />}
            />
       
          
            
            </div>
            
           
            
          
            
            
            
            
            </header>
            </div>
            
            );
    
    }
    
}

export default App;

但是在下面的代码块中，当我将loc的地图函数移到myMapComponent之外，并且在render（）之下时，它成功地将纬度记录到了控制台。

 render() {
{this.state.loc.map(l=>console.log(l.lat))}   
        const MyMapComponent = withScriptjs(withGoogleMap((Map) =>
                            <GoogleMap defaultZoom={2} defaultCenter={{ lat: -34.397,lng: 150.644 }}>
                                                     
                                                          
                                </GoogleMap>))

我是新来的反应者，所以我不确定是什么问题。我不确定这是否与我为每个Cell ID存储位置的方式有关，还是其他问题。

解决方法

您将必须使用回调函数，因为调用后 setState，可能不会立即更新数据以供使用。

您将需要传递这样的回调函数

this.setState({users},() => {
**Do your this.state.users.map **
})

您也可以参考这篇文章。

When to use React setState callback