[英]Warning: flattenChildren(…): Encountered two children with the same key, `false` in REACTJS
[英]flattenChildren(...) Reactjs warning
我在将数据更新到 google firebase 时遇到问题
这是构造函数和句柄函数:
constructor() {
super();
this.state = {
done: false
}
this.handleDoneChange = (event) => {
this.setState({
done: event.target.checked
})
Firebase.database().ref('/items').child(this.props.item.key).update(
{
done: event.target.checked
}
);
};
}
和呈现的 html
<input type="checkbox"
checked={this.state.done}
onChange={this.handleDoneChange}/>
每当我选中/取消选中该框时,它都会给我一个警告
warning.js:44 Warning: flattenChildren(...): Encountered two children with the same key, `.$-KJ1NOzrpaa5HmjRPulQ`. Child keys must be unique; when two children share a key, only the first child will be used.
但数据在firebase上发生了变化
任何人都知道这里发生了什么? 提前致谢!
React使用key
s弄清协调列表时的处理方式。 似乎您的render()
函数很好-您可以检查上面的一个或多个级别吗? 我猜您有一个使用.map(...)
呈现组件数组的父组件,对于该数组的每个项目,我们都需要提供一个key
。 您可以使用项目的唯一ID(应该可以从Firebase获取它)作为其键。
可以在https://facebook.github.io/react/docs/reconciliation.html#keys中找到更多信息。
我找到了解决方案,如果有,它可以帮助任何人将来参考。 我的错误在于:
componentDidMount() {
Firebase.database().ref('/items').on("value", function (data) {
this.setState({
listOfItems: []
});
console.log(this.state.listOfItems)
for (let key of Object.keys(data.val())) {
this.setState({
listOfItems: this.state.listOfItems.concat({key: key, text: data.val()[key].text, done: data.val()[key].done})
})
}
}.bind(this));
}
由于Google Firebase使用websocket,并且对UI的任何更改都将显示在数据库中,因此它每次都会尝试从代码中添加相同的内容
this.setState({
listOfItems: this.state.listOfItems.concat({key: key, text: data.val()[key].text, done: data.val()[key].done})
})
因此,我提出了另一种解决方案,添加/更新/删除数据没有错误:
componentDidMount() {
Firebase.database().ref('/items').on("value", function (data) {
let list = [];
for (let key of Object.keys(data.val())) {
let item = data.val()[key];
item.key = key;
list.push(item);
}
this.setState({
listOfItems: list
})
}.bind(this));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.