[英]flattenChildren(...) Reactjs warning
I am having a problem with updating data to google firebase我在将数据更新到 google firebase 时遇到问题
This is the constructor and handle function:这是构造函数和句柄函数:
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
}
);
};
} }
and the rendered html和呈现的 html
<input type="checkbox"
checked={this.state.done}
onChange={this.handleDoneChange}/>
Whenever I check/uncheck the box it gives me a warning每当我选中/取消选中该框时,它都会给我一个警告
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.
but data are changed on firebase但数据在firebase上发生了变化
Anyone have any idea of what is happening right here ?任何人都知道这里发生了什么? Thanks in advance!
提前致谢!
React uses key
s to figure out what to do when it reconciles the list. React使用
key
s弄清协调列表时的处理方式。 Seems like your render()
function is fine -- could you check one or more levels above? 似乎您的
render()
函数很好-您可以检查上面的一个或多个级别吗? I guess you have a parent component that uses .map(...)
to render an array of components, and for each item of the array we need to provide a key
. 我猜您有一个使用
.map(...)
呈现组件数组的父组件,对于该数组的每个项目,我们都需要提供一个key
。 You can use an item's unique ID (should be possible to get it from Firebase) as its key. 您可以使用项目的唯一ID(应该可以从Firebase获取它)作为其键。
More information can be found at https://facebook.github.io/react/docs/reconciliation.html#keys . 可以在https://facebook.github.io/react/docs/reconciliation.html#keys中找到更多信息。
I found the solution to this if, it can help anyone for future reference. 我找到了解决方案,如果有,它可以帮助任何人将来参考。 My mistake was in this:
我的错误在于:
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));
}
Since Google Firebase uses websocket and any change on UI is manifested on the database so it tries to add every time same thing from the code 由于Google Firebase使用websocket,并且对UI的任何更改都将显示在数据库中,因此它每次都会尝试从代码中添加相同的内容
this.setState({
listOfItems: this.state.listOfItems.concat({key: key, text: data.val()[key].text, done: data.val()[key].done})
})
So I came with a different solution and there is no error on adding/updating/removing data: 因此,我提出了另一种解决方案,添加/更新/删除数据没有错误:
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.