有人可以解释如何解决此错误
警告:flattenChildren(...):遇到两个孩子一样 键
我已经在下面复制了我的代码,但由于某种原因,CodePen没有显示错误。
package.json
作为第二个问题,我很确定我的重置应该重置选择框的值,但这也不起作用,只是重置渲染结果 - 不确定这是否与第一个问题有关?
任何帮助非常感谢
答案 0 :(得分:25)
使用索引作为关键不是一个好主意。关键是React用于识别DOM元素的唯一方法。如果您将项目推送到列表或删除中间的某些内容会发生什么?如果密钥与之前相同,则React假定DOM元素表示与以前相同的组件。但那不再是真的。来自:https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
最好使用您映射的每个项目中的唯一字符串作为键。像git clone -b test-branch --depth 1 https://github.com/cer/event-sourcing-examples
这样的东西,或者如果某个密钥不存在,可以通过执行类似<option key={value.id}>
的操作来创建唯一标识符。
答案 1 :(得分:11)
将索引添加为固定的值。感谢@azium为你的sugegstion。
<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>
答案 2 :(得分:0)
我非常喜欢通过将索引与某个常量值组合而不是使用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}
这只是一个意见。不过,我在编写props值时遵循html约定。
答案 3 :(得分:0)
实际上,您需要为每个孩子指定一个唯一的键,因此您需要创建另一个键,例如,如果您要从数据库中获取数据,则为此创建一个新列,例如(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>
);
}
});
我希望这对以后的所有人有帮助。