React выдает предупреждение об уникальном ключе для радиокнопки (на карте), несмотря на наличие уникальных ключей

Question

У меня есть следующий код (очевидно, это всего лишь контрольный пример вопроса, жизнь сложнее ...). Этот код работает, но он выдает предупреждение:

У каждого дочернего элемента в массиве или итераторе должен быть уникальный «ключ».

Я новичок в React и javascript, но Я понимаю ошибку и Я понимаю, зачем нужны уникальные ключи . Как вы можете видеть, я действительно предоставляю ключи, и они действительно уникальны

var possible_variants = ["A", "B", "C"];
var variant = "";

class App extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement(RadioButton, null)
    );
  }
}

class RadioButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    variant = event.target.value;
  }

  render() {
    return React.createElement(
      "div",
      {
        onChange: this.handleChange
      },

      possible_variants.map(function(my_variant, index) {
        return React.createElement(
          "label",
          null,
          React.createElement("input", {
            type: "radio",
            value: my_variant,
            key: my_variant,
            name: "variant"
          }),
          my_variant
        );
      })
    );
  }
}

ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("container")
);

Кажется, проблема в том, что React "хочет", чтобы ключ был вместо метки обертки, т.е. если я изменил отображение на

possible_variants.map(function(my_variant, index) {
  return React.createElement(
    "label",
    {
      key: my_variant // <= here comes the difference
    },
    React.createElement("input", {
      type: "radio",
      value: my_variant,
      name: "variant"
    }),
    my_variant
  );
});

предупреждение исчезает.

Итак, мой вопрос, почему это так? Насколько я понял из официальной документации и из различных учебных пособий по net, для лучшей производительности нужно, чтобы ключ находился в наиболее специфической c вещи, которая может измениться для повторного рендеринга, и что здесь ввод, а не метка, которая фиксируется раз и навсегда.

Я что-то упустил?

PS: Для меня это похоже на Реагирует на уникальный ключ при отображении предупреждение

Answer 1

Во-первых, нужен уникальный ключ, как мы оба знаем.

Что касается кода, то первый код фактически не связывал ключ с элементами карты, а второй - did.

См. документ React.createElement , каждый из которых создает один уровень элемента DOM.

В вашем первом коде, он фактически создан дважды , что означает, что ваш ключ был связан только внутри map items, а map items прямо под list.map не получил ключи.

<label>
  <input key={...}/>
</label>

Второй сделал это как обычно, так что дело доходит до разницы.

<label key={...}>
  <input />
</label>

Кстати, как говорится в комментарии, у вас редко есть шанс используйте те, которые реагируют top-level API, JSX / TSX только упрощает его.

Связанный QA в спецификациях c.