ReactJS TypeError：无法读取未定义的属性（读取'main'）

Posted 2023-03-29

【中文标题】ReactJS TypeError：无法读取未定义的属性（读取\'main\'）

【英文标题】：ReactJS TypeError: Cannot read properties of undefined (reading 'main')ReactJS TypeError：无法读取未定义的属性（读取'main'）

【发布时间】：2021-12-06 01:49:36

【问题描述】：

我正在尝试在 React JS 中制作天气应用程序，但是当我运行程序时出现错误“TypeError: Cannot read properties of undefined (reading 'main')”。以下是部分代码：

 return (
 <div className=(typeof weather.main != "undefined") ? ((weather.main.temp > 16 ) ? 
 'app warm':'app'):'app'>
   <main>

   <div className="search-box">

     <input type='text' 
      className='search-bar' 
      placeholder='Search ...'
      onChange=e => setQuery(e.target.value)
      value=query
      onKeyPress=search
      />
    </div>
    
    (typeof weather.main != "undefined") ? (
     <div>
      <div className='location-box'>
      <div className='location'>weather.name, weather.sys.country</div>
      <div className='date'>
        dateBuilder(new Date())
      </div>
      </div>
      <div className='weather-box'>
      <div className='temp'>
      Math.round(weather.main.temp)
      </div>
      <div className='weather'>
      weather.weather[0].main
      </div>
    
      </div>
     </div>
    ): (' ')
  </main>
   </div>
  );
  

【问题讨论】：

你用的是哪个 react js 版本

可以包含整个组件吗？我们需要知道你如何定义和加载你的状态变量。

【参考方案1】：

weather 在某些时候是未定义的。由于您只检查weather.main 是否未定义，因此您的代码有时会尝试读取main 的undefined 字段。

一种解决方案可能是条件链接。尝试改变

(typeof weather.main != "undefined") ? ...

到

weather?.main && (...

完整代码

return (
 <div className=`app $weather?.main?.temp > 16 ? 'app warm':''`>
   <main>

   <div className="search-box">

     <input type='text' 
      className='search-bar' 
      placeholder='Search ...'
      onChange=e => setQuery(e.target.value)
      value=query
      onKeyPress=search
      />
    </div>
    
    weather?.main && (
     <div>
      <div className='location-box'>
      <div className='location'>weather.name, weather.sys.country</div>
      <div className='date'>
        dateBuilder(new Date())
      </div>
      </div>
      <div className='weather-box'>
      <div className='temp'>
      Math.round(weather.main.temp)
      </div>
      <div className='weather'>
      weather.weather[0].main
      </div>
    
      </div>
     </div>
    ): (' ')
  </main>
   </div>
  );