Блог

         {this.state.selectedChart.map(item => {
          console.log(item.name)
          return  <div className="chartDisplayItem">
            <item.name data={data} options={options} />
            </div>
        })}
  

item.name ВОЗВРАТ Bar . Я пытаюсь заставить это работать как диаграмма, но получаю ошибки.

1. Предупреждение: у каждого дочернего элемента в списке должен быть уникальный «ключевой» реквизит.
2. Предупреждение: используется неправильный корпус. Используйте PascalCase для компонентов React или нижний регистр для элементов HTML.
3. Предупреждение: тег не распознан в этом браузере. Если вы хотели отобразить компонент React, начните его имя с заглавной буквы.

• <div className="chartDisplayItem"> вы должны передать уникальный ключ в div, посмотрите документ здесь https://reactjs.org/docs/lists-and-keys.html
• <item.name это не HTML-элемент, лучше обернуть его как функциональный компонент, а затем отобразить его, например, <Item values={item.attributes} /> но здесь Item будет другой компонент, который будет отображать элементы на основе его атрибутов, например name
• <item.name это не HTML-элемент, это ваше пользовательское имя, DOM не распознает узел с именем bar .

Предупреждение 1: используйте ключевой атрибут для элементов html или компонентов React и инициализируйте с помощью index, как показано ниже. коды

Предупреждение 2: изменение item.name чтобы Item.Name

Предупреждение 3. когда вы не используете PascalCase для компонента React, браузер называет ваш компонент html-элементом и предупреждает о неизвестном html-элементе

         {this.state.selectedChart.map((Item, index) => {
      console.log(Item.name)
      return  <div key={index} className="chartDisplayItem">
        <Item.name data={data} options={options} />
        </div>
    })}