React 警告：flattenChildren(...)：遇到两个 children 具有相同的键

Question

有人能解释一下如何解决这个错误吗

Warning: flattenChildren(...): Encountered two children with the same key

我已经在下面复制了我的代码，但出于某种原因，CodePen 没有显示错误。

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  <div className="filter-options">
    <div className="filter-option">
      <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option) {
        return (<option key={option}  value={option}>{option}</option>)
      })}
      </select>
  </div>
  </div>
 );
 }
 });

Codepen

作为次要问题，我很确定我的重置应该重置 select 框的值，但这也不起作用，只是重置渲染结果 - 不确定这是否与第一个问题？

非常感谢任何帮助

Answer 1

添加索引作为值解决了这个问题。感谢@azium 的建议。

  <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions.map(function(option, value) {
        return (<option key={value}  value={option}>{option}</option>)
      })}
      </select>

Answer 2

使用索引作为键不是一个好主意。键是 React 唯一用来识别 DOM 元素的东西。如果将一个项目推入列表或从中间删除一些东西会发生什么？如果键与之前相同，React 假定 DOM 元素代表与之前相同的组件。但这不再是事实。来自：https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

最好使用您要映射的每个项目中的唯一字符串作为键。 <option key={value.id}> 之类的东西，或者如果键不存在，则通过执行 <option key={value.name + value.description}>.

之类的东西来创建唯一标识符

Answer 3

我非常喜欢通过将索引与某个常量值相结合来使用键，而不是使用 key={value.name + value.description}:

key={'some-constant-value'+index}

这是因为我可以在知道它用于哪个组件的情况下传递密钥。例如。 <ComponentA key={'compoent-a-'+i} />。另外，我采用这种方法是因为简单的 html 约定匹配我们给出的 id="my-some-of-the-id" 之类的东西。

因此，即使您想使用名称和描述作为键，您也可以这样使用：

key={'some-constant-'+value.name+'-'+value.description}

这只是一个意见。虽然，我在编写道具值时遵循 html 惯例。

Answer 4

实际上你需要为每个 children 指定一个唯一的键，因此你需要创建另一个键，例如，如果你从数据库中获取数据，那么为此创建一个新列(id) 然后将该列的值添加到您的 div 或者您作为键循环的内容

var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},

render: function() {

return (
  <div className="filter-options">
    <div className="filter-option">
      <select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
      <option value=''>Product</option>
      {this.props.productOptions && this.props.productOptions.map(function(option) {
        return (<option key={option.id}  value={option}>{option}</option>)
      })}
      </select>
  </div>
  </div>
 );
 }
 });

我希望这对以后的任何人都有帮助。

React 警告：flattenChildren(...)：遇到两个 children 具有相同的键

React Warning: flattenChildren(...): Encountered two children with the same key

javascript

select

option

reactjs