Question

我尝试遍历包含API响应的状态数组时打印一行卡片。

  renderItems(){
    return (
      <div>
      {this.state.apiArr.map( (apiDetails, k) =>(
        <SimpleMediaCard key={k} details={apiDetails}></SimpleMediaCard>))}
      </div>
    )
  }

然后稍后以这种方式渲染它：

render() {
    return (
    <Grid container>
      <Grid item xs={12} sm={8}>
        {this.renderItems()}
      </Grid>
    </Grid>
  )
}

但是问题在于，这样我就不会像我想要的那样在行中渲染X张卡，而是只渲染一张卡，而且我看到卡的道具在处理映射时发生了变化。

我确信使用有效的唯一键，react将确保呈现另一个组件，而不是使用不同的道具重新呈现前一个组件。

Answer 1

不确定Grid的工作方式，但我认为item应该在map内：

renderItems(){
    return (
      <div>
      {
       this.state.apiArr.map((apiDetails, k) => (
          <Grid item xs={12} sm={8}>
             <SimpleMediaCard key={k} details={apiDetails}></SimpleMediaCard>
          </Grid>
       ))
      }
      </div>
    )
}

并删除常规<Grid item xs={12} sm={8}>中的render()。

Answer 2

感谢 UXDart ，我设法解决了这个问题。正如他提到的那样，问题出在我的状态数组中。我以前是这样构建的：

this.setState( prevState => ({ apiArr: [...prevState, response] }))

但这实际上是在将我所有的响应都放在同一数组元素中来构建一个大小为1的数组。我要做的就是更改为：

this.setState( prevState => ({
        apiArr: this.state.apiArr.concat(response)
      }))

它解决了我的问题。

我在一个组件中渲染多个道具，而不是在多个组件中渲染多个道具

2 个答案: