Question

我有一个名为“最近开放”的子组件。没有从父级组件传递到子级组件的道具。父组件的rendor方法是：

tidyverse

子组件（RecentlyOpened）的render方法如下：

library(tidyverse)
set.seed(123)

df <- tibble(
  x   = runif(90),
  grp = gl(3, 30)
)

df %>% 
  mutate(
    grp = fct_reorder(grp, x, .fun = "sum", .desc = TRUE)
  ) %>% 
  arrange(grp)
#> # A tibble: 90 x 2
#>         x grp  
#>     <dbl> <fct>
#>  1 0.288  1    
#>  2 0.788  1    
#>  3 0.409  1    
#>  4 0.883  1    
#>  5 0.940  1    
#>  6 0.0456 1    
#>  7 0.528  1    
#>  8 0.892  1    
#>  9 0.551  1    
#> 10 0.457  1    
#> # … with 80 more rows


df %>% 
  group_by(grp) %>% 
  summarise(tot = sum(x))
#> # A tibble: 3 x 2
#>   grp     tot
#>   <fct> <dbl>
#> 1 1      17.2
#> 2 2      13.2
#> 3 3      15.4

此处 this.state.items 是通过API调用填充的。但是即使在API调用返回数据后状态被更新（我已经检查过），map函数内的UI也不会显示，而仅显示空div。子组件的状态更改后，是否不应该更新UI？

Answer 1

您没有在映射循环中返回值。一个简单的解决方法是用括号替换大括号。

render() {
    return (
        <div className='outer-box'>
            {this.state.items.map(item => (
                <div className='item-box'>
                    <img className='image' src={'/src/assets/' + item.imgURL} />
                    <div className='name  item-margin'>{item.name}</div>
                    <div className='id  item-margin'><b>SKU/ID: </b>{item.productId}</div>
                </div>;
            ))}
        </div >
    );
}

子状态已更新，但未渲染

1 个答案: