我在一个组件中呈现多个道具，而不是在多个组件中呈现多个道具答案

【问题标题】：I render multiple props in one component instead of multiple props in multiple component我在一个组件中呈现多个道具，而不是在多个组件中呈现多个道具
【发布时间】：2019-01-25 22:28:01
【问题描述】：

我尝试在循环包含 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 肯定会渲染另一个组件，而不是使用不同的道具重新渲染前一个组件。

【问题讨论】：

不清楚this.state.apiArr中的数据包含什么。回调中每个 k 的值是多少？（看起来您可能想要(k, apiDetails) 而不是(apiDetails, k)，但根据给出的信息很难判断。）
Grid 应该控制东西的位置吗？你只有一个Grid item。
这就是我在收到 API 响应后填充状态数组的方式：this.setState( prevState => ({ apiArr: [...prevState, response] }))。所以最后我有一个对象数组

标签： javascript reactjs rendering render

【解决方案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}>。

【讨论】：

所以基本上item应该在map里面
感谢您指出这一点。我做了更改，但没有纠正主要问题
我想你发现问题出在哪里...我的数组中确实只有一项...我必须更改填充状态数组的方式

【解决方案2】：

感谢 UXDart，我设法解决了这个问题。正如他所说，问题来自我的状态数组。我以前是这样构建的：

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

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

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

它解决了我的问题。

【讨论】：