Массив итераций по карте для рендеринга ключа компонента, который не обновляется в реквизитах

Question

У меня есть два компонента, один из них - контейнер, вызывающий компонент item.Контейнерный компонент выполняет итерацию, используя компонент карты примерно так:

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

    })}

Автомобильный компонент находится в контейнере Lot, как вы можете видеть, но когда я console.log id вАвтомобильная составляющая всегда равна 0

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

. Мне не хватает чего-то очень тривиального, и я чувствую себя действительно глупо, задавая этот вопрос.Я использую идентификатор для воспроизведения данных при вызове onchange.

Answer 1

Может быть, этот пример будет полезен

Просмотр и редактирование в Codesandbox

Answer 2

попробуйте таким образом.

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

Может быть элемент имеет уникальный идентификатор, и он всегда равен 0. Он переопределит ваш идентификатор.

Answer 3

В 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: фактические данные элемента для вашего компонента.Я не люблю отдавать свои атрибуты данных корневому уровню реквизита.

Answer 4

Каждый Компонент, который обрабатывает DOM, нуждается в уникальном ключе.Используйте ключевой атрибут для идентификации каждого компонента автомобиля.

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