javascript - 尽管提供了唯一的键，React 仍为单选按钮(在 map 中)提供了唯一的键警告

Question

我有以下代码(显然这只是问题的测试用例，生活更复杂......)。此代码有效，但它给出了警告:

Each child in an array or iterator should have a unique "key" prop.

我对 React 和 javascript 还很陌生，但是我确实理解错误，并且我确实理解为什么需要唯一键。正如您所看到的，我确实提供了 key ，而且它们确实是唯一的

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“希望” key 位于包装标签中，即如果我将映射更改为

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
  );
});

警告消失。

所以我的问题是为什么会这样？这是我从official documentation中了解到的从网上的各种教程来看，为了获得最佳性能，人们希望关键是可能会因重新渲染而改变的最具体的东西，这就是这里的输入，而不是一劳永逸地固定的标签。

我错过了什么吗？

PS:对我来说，这感觉类似于 React unique key when mapping warning

Answer 1

首先，我们都知道，需要一个唯一的 key 。

至于代码，第一个代码实际上没有将键绑定(bind)到 map 项，而第二个代码则做到了。

引用React.createElement document，每个都会创建一层 DOM 元素。

在您的第一个代码中，它实际上创建了两次，这意味着您的 key 仅绑定(bind)在 map 项内部， map 项就在 list.map 下没有任何键。

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

第二个让它变得正常，所以它出现了差异。

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

顺便说一句，正如评论所说，你很少有机会使用那些 React 顶级 API，JSX/TSX 只是让它变得更简单。

相关QA具体来说。