如何解决错误 Cannot read 属性 '1' of undefined?

Question

伙计们，我正在为我的 React 应用程序制作预加载器，但出现错误。

我正在使用 thunk 来更改预加载器 (true/false) 的状态，在组件中它看起来像：

{isLoading === true ? <Preloader />  :
                <div className="daily-weather-container">
                    <div className="daily-title">Daily Weather</div>
                    <div className="row scrolling-wrapper ">
                        <div className="col-lg-2 box-daily-weather">
                            {getWeatherStatistic(1)}
                        </div>
                    </div>
                </div>
            }
        </div>
    )
}

const getWeatherStatistic = (value) => {
        return (
            <div>
                <div className="date-box">5 June, Friday</div>
                <div className="temp-day">{Math.ceil(dailyData.daily[value].temp.day)}°C</div>
                <div className="feels-like">Feels like: {Math.ceil(dailyData.daily[value].feels_like.day)}°C</div>
                <div className="daily-weather-condition">Conditions: {dailyData.daily[value].weather.map(e => e.main)}</div>
            </div>
        )
    }

并且它有效，但问题出在这里{getWeatherStatistic(1)}。 1 - 我从 ajax 请求中获得的对象索引。所以发生这个错误是因为，当用户打开我的应用程序时，状态为空，因此它无法获取索引对象（显然它在发出请求之前不存在）。

那么如何解决这个问题呢？

Answer 1

向自己保证 dailyData.daily 是一个正确的数组，它不会崩溃

const getWeatherStatistic = (value) => {
    if(dailyData && Array.isArray(dailyData.daily){
        return (
            <div>
                <div className="date-box">5 June, Friday</div>
                <div className="temp-day">{Math.ceil(dailyData.daily[value].temp.day)}°C</div>
                <div className="feels-like">Feels like: {Math.ceil(dailyData.daily[value].feels_like.day)}°C</div>
                <div className="daily-weather-condition">Conditions: {dailyData.daily[value].weather.map(e => e.main)}</div>
            </div>
        )
    }
    else{
        return (
            <div>Loading...</div>
        )
    }
}

Answer 2

很可能发生这种情况是因为默认情况下变量 isLoading 是 true（在组件或商店中）。如果您可以 post 您的商店、reducer 和组件，那就太好了。

Answer 3

问题是您尝试获取 daily[1] 但每天都是 undefined。一个简单的解决方案可能是：

const getWeatherStatistic = (value) => {
  const { daily = [] } = dailyData || {}
  const {
    temp = {},
    feels_like = {},
    weather = []
    } = daily[value] || {}
  return (
      <div>
          <div className="date-box">5 June, Friday</div>
          <div className="temp-day">{temp.day ? Math.ceil(temp.day) : ''}°C</div>
          <div className="feels-like">Feels like: {feels_like.day ? Math.ceil(feels_like.day) : ''}°C</div>
          <div className="daily-weather-condition">Conditions: {weather.map(e => e.main)}</div>
      </div>
  )
}

所以你要确保任何东西都坏了。

如何解决错误 Cannot read 属性 '1' of undefined?

How to solve error Cannot read property '1' of undefined?

javascript

ajax

preloader

reactjs

redux