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

问题是您尝试获取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>
  )
}

因此，请确保一切都可以。

Answer 3

这很可能是由于变量isLoading在组件或商店中默认为true而发生的。如果您可以发布商店，Reducer和组件，那就太好了。

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

3 个答案: