React天气站点添加.toFixed后页面空白问题求助

问题原因 #

你遇到的页面空白是因为组件初始渲染时data是空对象，此时data.main为undefined，尝试访问data.main.temp会触发Cannot read properties of undefined (reading 'temp')错误，导致React组件崩溃。

组件挂载后，useEffect会发起天气请求，但请求完成前组件已经完成第一次渲染，这时候data仍为初始的{}，无法读取嵌套的main.temp属性。

修复方案 #

方案1：使用可选链操作符（推荐）

在访问嵌套属性时添加可选链?.，当属性不存在时返回undefined，配合空值合并操作符??设置默认值，避免报错：

<div><h2>{((data.main?.temp ?? 0) - 273.15).toFixed(2)}°C</h2></div>

• data.main?.temp：若main不存在，直接返回undefined，避免抛出错误
• ?? 0：当temp未加载时，用0作为默认值，防止计算出现NaN

方案2：条件渲染

判断data.main存在后再渲染温度元素，确保只有当数据加载完成后才执行计算：

{data.main && (
  <div><h2>{((data.main.temp)-273.15).toFixed(2)}°C</h2></div>
)}

方案3：初始化data时设置默认结构

在useState初始化时给data设置包含main的默认结构，保证初始渲染时所有需要访问的属性都存在：

const [data, setData] = useState({main: {temp: 0}, name: "加载中..."})

完整修复代码（方案1示例） #

import axios from "axios";
import React, { useEffect, useState } from "react";
import './style.css';
export function Weather (){

  const apikey = "1815b2003ad4cef38e6b16343a9034ca"
  const [input, setInput] = useState("")
  const [data, setData] = useState({})


const getdetail = (cityName) => {
  const apiURL = "https://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&appid=" + apikey
  axios.get(apiURL).then((res)=>{
    console.log("response",res.data)
    setData(res.data)
  }).catch((err)=> {
    console.log("err", err)
  })
}
const handleinput = (e) =>{
  setInput(e.target.value)
}

const handle = () => {
  getdetail(input)
}
useEffect(()=>{
  getdetail("delhi")
}, [])
  return(
    <>
      <div className="col-md-12">
        <div className="weat">
          <div className="container"> 
            <h2 className="hed">Weather</h2>
          </div>
          <img className="img-fluid" src="bc.jpg" alt="" />
          <div><h3>{data.name ?? "加载中..."}</h3></div>
          <div><h2>{((data.main?.temp ?? 0)-273.15).toFixed(2)}°C</h2></div>
          <div className="container in">
            <input type="text" value={input} onChange={handleinput}/><br/><br/>
            <button className="btn btn-danger" onClick={handle}>查询天气</button>
          </div>
        </div>
      </div>
    </>
  )
}

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