渲染嵌套对象状态

时间:2017-04-25 14:21:10

标签: reactjs jsx

这个问题给我带来了巨大的麻烦,所以欢迎任何帮助:)

在这个组件中,我对不同的API进行了2次axios调用:一次用于freegeoip,另一次用于openweathermap。我将数据存储在tablePlot <- function( data, MAX_ROWS = 7, ... ) { mostRows <- max( sapply( data, function(d) { ifelse( length( d ) %/% MAX_ROWS > 0, MAX_ROWS, length( d ) %% MAX_ROWS ) } ) ) dataMod <- sapply( data, function( d ) { nc <- ( length( d ) %/% (MAX_ROWS + 1) ) + 1 for ( aoc in (length( d ):(mostRows*nc))[-1] ) d[aoc] <- NA newD <- c() for ( aoc in 1:length(d) ) newD[aoc] <- ifelse( is.na( d[aoc] ), '', format( d[aoc], nsmall = 1 ) ) return( matrix( newD, nrow = mostRows, ncol = nc ) ) } ) # dataMod <- unlist( lapply( data, function( col ) { # split( col, seq_len( length(col) ) %/% (MAX_ROWS + 1) ) # } ), FALSE ) dataDF <- data.frame( dataMod, stringsAsFactors = FALSE, check.names = FALSE ) # dataDF <- as.data.frame( do.call( cbind.fill, dataMod ), stringsAsFactors = FALSE, check.names = FALSE ) # colnames( dataDF ) <- c( '', names( data ) ) prefferedFont <- list( fontface = 'plain', fontfamily = 'Times', cex = φ/1.25 ) g <- tableGrob( dataDF, theme = ttheme_minimal( colhead = list( fg_params = prefferedFont ), core = list( fg_params = prefferedFont ) ), rows = NULL ) g$colnames <- colnames( dataDF ) g <- gtable_add_grob( g, grobs = segmentsGrob( name = 'segment', y1 = unit( 0, 'npc' ), gp = gpar( lty = 1, lwd = 1 ) ), t = 1, l = 1, r = ncol( g ) ) g$widths <- unit( rep( (1/φ) / ncol( g ), ncol( g ) ), 'npc' ) id_cell <- function( table, row, col, name = 'colhead-fg' ) { l <- table$layout which( l$t %in% row & l$l %in% col & l$name == name ) } # id <- id_cell( g, 1, 2 ) # g$layout[id, 'l'] <- g$layout[id, 'l'] - 1 ### CODE TO SEARCH FOR REPEAT COLUMN HEADERS ### Combine repeated column headers to some center ### Delete other unneccessary column header text/rect grobs grid.newpage() grid.draw( g ) return( dataMod ) return( invisible( g ) ) } 状态,这是一个包含2个密钥currentCitylocation的对象。我们的想法是应用程序检测您当前的位置(使用freegeoip)并呈现位置名称和天气数据(使用openweathermap)。

我很肯定它在控制台日志确认后正确存储状态。我可以渲染currentCity状态的位置数据,但似乎无法呈现currentCity状态的天气数据。

weather

我得到的控制台错误:

  renderCurrentCity(city) {
    console.log('state3:', this.state.currentCity);
    console.log([city.weather.main]);
    return(
      <div>
        <li>{city.location.city}, {city.location.country_name}</li>  // Working
        <li>{city.weather.main.temp}</li>       // Not working
      </div>

    )
  }

currentCity.location JSON:

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null

currentCity.weather JSON:

{
"ip": // hidden,
"country_code": "FR",
"country_name": "France",
"region_code": "GES",
"region_name": "Grand-Est",
"city": "Reims",
"zip_code": "",
"time_zone": "Europe/Paris",
"latitude": 49.25,
"longitude": 4.0333,
"metro_code": 0
}

其余代码:

{
"coord": {
"lon": 4.03,
"lat": 49.25
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}
],
"base": "stations",
"main": {
"temp": 283.15,
"pressure": 1011,
"humidity": 43,
"temp_min": 283.15,
"temp_max": 283.15
},
"visibility": 10000,
"wind": {
"speed": 3.1,
"deg": 350
},
"clouds": {
"all": 0
},
"dt": 1493127000,
"sys": {
"type": 1,
"id": 5604,
"message": 0.1534,
"country": "FR",
"sunrise": 1493094714,
"sunset": 1493146351
},
"id": 2984114,
"name": "Reims",
"cod": 200
}

1 个答案:

答案 0 :(得分:0)

当您收到天气数据时,您正在传播整个州:

this.setState({
    currentCity: { ...state, weather: city.data }
});

它应该是:

this.setState({
    currentCity: { ...state.currentCity, weather: city.data }
});