React this.setState更改数据,数据更新了 ui界面却不更新

React 数据setState更新,state数据改变,页面ui却没有更新

		代码如下:
		import React, { PureComponent, useState, useRef } from 'react'
import { Mapbox, InnerMap } from './style'
// import  Example  from './position'
import { Map,  Marker, Geolocation  } from 'react-amap';
import axios from 'axios'
import HeaderTinyPng from './header'
import LeftMenu from '../leftMenu'
import RightMenu from '../rightMenu'
import './position.css'
import { Button } from 'element-react';




class Homepage extends PureComponent {
    constructor( props ){
        super()
        this.state= {
            getDatas: [],
            gdkey: '0d9a2cbac23306d5a86c1ade7d84d3af',
            lenarr: [],
            center: { longitude: 121.061411, latitude: 31.376044 },
            everPoint: [], 
            transDates:[],
            elements:[],
        } 
        // console.log(this.state.getDatas)
    }

    componentWillMount = () => {
        axios.get('***********************')
        .then( (data)=>{
            // console.log(data.data.data)
            let ele = data.data.data;
            let forEachData = [];
            // console.log(ele)
            const allmarker = [];
            const normarker = [];
            const faultmarler = [];
            const disconnectmarker = [];
            const initmarker = [];
            const emptypile = [];
            const fullpile = [];
            const emptywarning = [];
            const fullwarning = [];
            // const transportData = [];
            {
                ele.map((data,index)=>{
                    const lon = data.stationLocationLong
                    const lat = data.stationLocationLat
                    const titleLoc = data.stationLocation
 
                    let lockStatus = data.lockStatus; 
                    let lockStatusNum = Number(lockStatus)
                /
                   if( lockStatusNum >= 0 ){
                            allmarker.push( {lon,lat,titleLoc} )   
                            console.log(allmarker)  
                        if( lockStatusNum === 0 ){
                            normarker.push( {lon,lat,titleLoc} )
                        } else if( lockStatusNum === 1 ) {
                            faultmarler.push( {lon,lat,titleLoc} )
                        } else if( lockStatusNum === 2 ){
                            disconnectmarker.push( {lon,lat,titleLoc} )
                        }else if( lockStatusNum === 3 ){
                            initmarker.push( {lon,lat,titleLoc} )
                        }else if( lockStatusNum === 4 ){
                            emptypile.push( {lon,lat,titleLoc} )
                        }else if( lockStatusNum === 5 ){
                            fullpile.push( {lon,lat,titleLoc} )
                        }else if( lockStatusNum === 6 ){
                            emptywarning.push( {lon,lat,titleLoc} )
                        }else if( lockStatusNum === 7 ){
                            fullwarning.push( {lon,lat,titleLoc} )
                        }
                     }   
                  
                    })
                    
                }
                               const transportData = [allmarker,normarker,faultmarler,disconnectmarker,initmarker,emptypile,fullpile,emptywarning,fullwarning]
                this.setState({
                    transDates : transportData
                })
                console.log(this.state.transDates)
                // console.log(allmarker)
                forEachData = [...allmarker]
                this.setState({
                    everPoint : forEachData,
                   
                })
            // console.log( forEachData )
            // this.setState({
            //     getDatas : ele,
            // })
        } )
        .catch(()=>{
                alert('请求失败')
            }
        )

    }
    componentDidMount = () => {
        // console.log( Map )
        // console.log(window.AMapUI)
        const AMapUI = window.AMapUI;
        
    }

  

    render(){
        const Key = this.state.gdkey;
        const AMap = window.AMap
        // const deepcopy = this.state.everPoint;

        return (
            <Mapbox>
                {/* <div style={{width:'100px',height:'200px',background:'red'}} onClick={ this.handlePositionCenter }></div> */}
                <HeaderTinyPng />
                <LeftMenu 
                    transportDatatoson = { this.state.transDates } 
                    handleRenderMarker = { this.handleRenderMarker }
                />
                <RightMenu />
                <InnerMap id='innerMap'>
                        **<Map 
                            akay={ Key }
                            zoom={ 13 }
                            mapStyle = "amap://styles/dark"
                            center={ this.state.center }
                            // center = {[121.061411,31.376044]}
                        >
                            {
                                this.state.everPoint.map( (data,index)=>{
                                    // console.log(data)
                         
                                        return(
                                            <Marker key={index} title={data.titleLoc} position={[data.lon,data.lat] } />
                                        ) 
                                    } )
                            }**
{/* <Example className='positionEle' /> */}
{/* 自我定位 */}
{/* <Geolocation
    // 是否使用高精度定位,默认:true
    enableHighAccuracy={true}
    // 超过10秒后停止定位,默认:5s
    timeout={10000}
    // 定位按钮的停靠位置
    buttonPosition="RB"
    // 定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
    // buttonOffset={new AMap.Pixel(60, 200)}
    // 定位成功后是否自动调整地图视野到定位点
    zoomToAccuracy={ true } 
/> */}              
                        </Map>
                   
                </InnerMap>
            </Mapbox>
        )
    }
            //更改定位状态属性
                handlePositionCenter = () => {
                    this.setState({
                        center : {longitude : 121,latitude : 31.376044}
                    })
                }

                handleRenderMarker = (datas) => {
                    console.log(datas)
                    console.log(this.state.everPoint)
                    this.setState({
                        everPoint : datas
                    },()=>{
                        console.log(this.state.everPoint)
                    })
                }
           
}

export default Homepage

// https://blog.csdn.net/qq_40259641/article/details/105275819
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 16
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值