Ken428965 2022-10-05 00:07 采纳率: 53.4%
浏览 105
已结题

react,使用hook,导航栏如何自动获取当前定位城市名称?

在使用的react版本如下:

img


已写的代码如下:

import React, { useEffect, state } from 'react'
import { GlobalOutline, DownOutline, SearchOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom'
import './style.css'
import axios from 'axios'
import { getCurrentCity } from '../../../utils'
function IndexSearch() {
// export default class Myindexsearch extends React.Component {
    const navigate = useNavigate()
    state = {
      // 当前城市名称
      curCityName: '上海'
    }
    // 通过 IP 定位获取到当前城市名称
    const curCity = new window.BMapGL.LocalCity()
    curCity.get(res => {
      // console.log('当前城市信息:', res)
      const result = axios.get(
        `http://localhost:8080/area/info?name=${res.name}`
      )
      // console.log(result)
      this.setState({
        curCityName: result.data.body.label
      })
    })
    useEffect(() => {
      const curCity = getCurrentCity()
      this.setState({
        curCityName: curCity.label,
      });
    }, []);
  // render() {
    return (
      <div className='search-box-indexsearch'>
        <div className='search'>
          <div className='location' onClick={()=>{navigate("/citylist")}}>
            <span className='name'>{this.state.curCityName} </span>
            {/* <span className='name'>广州 </span> */}
            <i className='icon-arrow'><DownOutline /></i>
          </div>
          <div className='form' onClick={()=>{navigate("/search")}}>
            <i className='icon-search'><SearchOutline /></i>
            <span className='text'>请输入小区或地址</span>
          </div>
        </div>
        <i className='icon-map' onClick={()=>{navigate("/map")}}><GlobalOutline /></i>
      </div>
    )
  // }
}
export default IndexSearch
 

chrome浏览器界面报错如下:

img

测试过接口地址能成功获取到当前定位城市信息以及当前定位城市名称
目前效果如下:

img

希望实现效果——页面每次加载时都自动获取当前定位城市名称并显示,如下所示:

img

请问代码出了什么问题?如何修改?

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-10-05 22:00
    关注

    不适用class方式的话,新版react你应该将 componentDidMount替换成 useEffect

    useEffect(() => {
        const curCity = getCurrentCity();
        this.setState({
          curCityName: curCity.label,
        });
      }, []);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月9日
  • 已采纳回答 10月9日
  • 修改了问题 10月8日
  • 修改了问题 10月6日
  • 展开全部

悬赏问题

  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力
  • ¥15 c语言题目:成绩管理系统