如何解决错误，无法读取未定义的属性'1'？

Question

所以，我正在为我的React App创建预加载器，但是出现错误。

---

我正在使用thunk更改预加载器的状态（是/否），并且在组件中，它看起来像：

{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。如果您可以发布商店，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">{Math.ceil(temp.day)}°C</div>
          <div className="feels-like">Feels like: {Math.ceil(feels_like.day)}°C</div>
          <div className="daily-weather-condition">Conditions: {weather.map(e => e.main)}</div>
      </div>
  )
}