React组件接收props后Axios请求无法获取经纬度参数问题

你遇到的「render中能正常读取props值，但axios请求里拿到的lat/lon是undefined」的问题，本质是React组件的生命周期执行时序错位，和props传递逻辑、this绑定都没有关系。
完整的执行流程刚好匹配你看到的现象：

1. 父组件Geo初始化时，自身存储经纬度的statelatitude、longitude初始值为undefined/空值
2. Geo第一次渲染时，会带着初始空值渲染<Temp lat={this.state.latitude} lon={this.state.longitude} />，触发Temp组件的挂载流程
3. Temp挂载阶段立刻执行componentDidMount，这时候拿到的this.props.lat/lon就是Geo传过来的初始空值，带着undefined发了天气API请求
4. 后续Geo通过异步接口拿到真实经纬度，更新自身state，重新渲染把正确的经纬度作为props传给已经挂载完成的Temp组件——这时候Temp的render函数确实能读到最新的props值，但之前的axios请求早就执行结束了，不会因为props更新重新触发。

方案1：调整请求触发时机，匹配props更新节奏 #

原来的逻辑只在组件挂载时发起一次请求，只要在props变化、且经纬度变为有效值的时候，再补充触发请求即可。修改后的核心代码逻辑：

// 挂载时先判断当前props是否有有效经纬度，有就直接请求
componentDidMount() {
  if (this.props.lat && this.props.lon) {
    this.getTempInfo();
  }
}

// 新增props更新的生命周期判断
componentDidUpdate(prevProps) {
  // 仅当经纬度值发生变化、且为有效值时，重新发起请求，避免重复无效调用
  const isLatChanged = prevProps.lat !== this.props.lat;
  const isLonChanged = prevProps.lon !== this.props.lon;
  const hasValidCoord = this.props.lat && this.props.lon;

  if ((isLatChanged || isLonChanged) && hasValidCoord) {
    this.getTempInfo();
  }
}

你原本写的getTempInfo是类箭头函数，this绑定没有问题，调用时会自动读取当前最新的props值，不需要额外修改函数内部的取值逻辑。

方案2：从父组件层控制挂载时机，从根源避免时序问题 #

这种方式更简洁，不需要在Temp组件里加额外的生命周期判断，只需要在Geo组件渲染Temp的时候，加个条件判断——等经纬度拿到有效结果之后，再挂载Temp组件：

// Geo组件的渲染逻辑改造
{this.state.latitude && this.state.longitude ? (
  <Temp lat={this.state.latitude} lon={this.state.longitude} />
) : (
  <div>正在获取定位信息...</div>
)}

这样Temp第一次挂载时，拿到的props就是已经准备好的有效经纬度，componentDidMount发起请求时不会拿到undefined值。

• 删掉constructor里把props同步到state的冗余逻辑：你现在在constructor里把lat、lon从props复制到state里，但后续代码从来没有读取过state里的这两个值，属于完全冗余的代码，反而容易引起逻辑混淆，可以直接删掉，state里只保留temp、wind字段即可
• 替换API请求里的占位密钥：当前代码里的appid={mytopsecretAPIkeyyyy}是占位内容，实际请求时要替换成真实的OpenWeather平台API密钥，否则就算经纬度正常，请求也会因为鉴权失败
• 替换http请求地址：当前用的是http协议的接口地址，大部分线上部署环境会拦截http混合内容请求，建议换成对应的https接口地址，避免请求被浏览器拦截

内容的提问来源于stack exchange，提问作者Jason