flattenChildren(...) Reactjs 警告

Question

我在將數據更新到 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上發生了變化

任何人都知道這里發生了什么？ 提前致謝！

Answer 1

React使用key s弄清協調列表時的處理方式。 似乎您的render()函數很好-您可以檢查上面的一個或多個級別嗎？ 我猜您有一個使用.map(...)呈現組件數組的父組件，對於該數組的每個項目，我們都需要提供一個key 。 您可以使用項目的唯一ID（應該可以從Firebase獲取它）作為其鍵。

可以在https://facebook.github.io/react/docs/reconciliation.html#keys中找到更多信息。

Answer 2

我找到了解決方案，如果有，它可以幫助任何人將來參考。 我的錯誤在於：

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