Question

我有两个组件，一个是调用item组件的容器。容器组件正在使用map组件进行迭代，如下所示：

    {this.state.items.map((item, id)=>{
        return (<Car onChange={this.onChange} id={id} {...item}/>);

    })}

如您所见，car组件位于Lot容器中，但是当我在car组件中进行console.log记录时，其ID总是为0

  render() {
    console.log("Rendering "+this.props.id); 
}

我在这里错过了一些琐碎的事情，问这个问题我真的很愚蠢。调用onchange时，我使用ID来处理数据。

Answer 1

在HTML中，当您多次提供相同的属性时，它将仅优先显示优先级。

在JS中，map函数将在回调函数item, index, array中为我们提供三个参数。

话虽如此，请不要使用混淆的名称。考虑将变量更改为此。

{
  this.state.items.map((item, index) => (
    <Car 
      key={`car-${index}`} 
      carIndex={index}
      car={item}  // or `data={item}`
      onChange={this.onChange} 
    />
  ))
}

key：用于唯一标识Car组件的每个实例。
itemIndex：您的逻辑用法
car：您组件的实际项目数据。我不喜欢将数据属性赋予props的根目录级别。

Answer 2

渲染到DOM的每个组件都需要一个唯一的键。使用键属性标识每个Car组件。

{this.state.items.map((item, id)=>{
      return (<Car onChange={this.onChange} key={id} {...item}/>);
    })}

Answer 3

以这种方式尝试。

Input(batch_shape=(batch_size, h, w, c))

可能是具有唯一ID的项，并且始终为0。它将覆盖您的ID。

Answer 4

也许这个例子会有用

View and edit on Codesandbox

遍历地图的对象数组，以渲染未在prop中更新的组件键

4 个答案: