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

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>
    )
}

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

Answer 2

感谢 UXDart 我设法解决了这个问题。正如他提到的，问题出在我的状态数组上。我曾经这样构建它：

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

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

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

它解决了我的问题。

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

I render multiple props in one component instead of multiple props in multiple component

javascript

rendering

render

reactjs