Каждый дочерний элемент в списке должен иметь уникальную ключевую опору. в ответ

У меня есть дочерний компонент, как показано ниже

import React, { Component } from 'react';

class InputText extends Component  {
  render = () => {    
    return (
      <div className="form-group">
        <label htmlFor={this.props.id}>{this.props.label}</label>
        <input type={this.props.type} value={this.props.value} placeholder={this.props.placeholder} name={this.props.name} id={this.props.id} className= {"form-control "+ this.props.class} required={this.props.extraValue}/>
      </div>
    )
  }
}

export default InputText

Я вызываю это в родительском компоненте, как показано ниже

<InputText class="" placeholder="Email here..." type="email" name="email" onChange={this.handleChange} extraValue={true} label={[<span className="text-danger">*</span>, " Email"]} />

Я получаю сообщение об ошибке, как показано ниже

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `InputText`. It was passed a child from Register. See https://fb.me for more information.
    in span (at Register.js:182)
    in InputText (at Register.js:182)

введите здесь описание изображения


reactjs key react-component
person abu abu    schedule 05.12.2019    source источник
comment
Отвечает ли это на ваш вопрос? Предупреждение: Каждый дочерний элемент в массиве или итераторе должен иметь уникальную ключевую опору. Проверьте метод рендеринга ListView   -  person norbitrial    schedule 05.12.2019
comment
Спасибо @norbitrial. У меня нет массива. Итак, как можно создать уникальный идентификатор?   -  person abu abu    schedule 05.12.2019
comment
Вы передаете массив для значения метки. Может быть, это вызвало ошибку?   -  person Chris Adams    schedule 05.12.2019

Ответы (1)


arrow_upward
2
arrow_downward

Каждый элемент JSX, переданный как массив, должен иметь уникальный идентификатор. Просто назначьте какой-нибудь ключ элементу span.

label={[<span key={1} className="text-danger">*</span>, " Email"]}
            // ^^^^ key

Однако я бы посоветовал вам просто передать его как два отдельных свойства, а не передавать как массив.

label={'*'}
text={'Email'}

и внутри вашего компонента:

<label htmlFor={this.props.id}>
   <span className='text-danger'>{this.props.label}</span>
   {this.props.text}
</label>
person kind user    schedule 05.12.2019
comment
Спасибо пользователю @kind. У меня нет массива. Итак, как можно создать уникальный идентификатор? - person abu abu; 05.12.2019
comment
@abuabu На самом деле у вас есть массив - вы передаете два узла внутри массива. - person kind user; 05.12.2019