React中this.setState在Firebase数据变更时未更新值的问题求助

你遇到的核心问题是直接修改了原状态数组/对象，导致React无法检测到状态变化——React的setState依赖浅比较来判断是否需要重新渲染，如果你传递的还是同一个数组引用，哪怕内部元素变了，React也会认为状态没更新，自然不会重新渲染组件。

问题出在哪？ #

看你的代码：

• 在child_added里，你直接用this.state.notes.push()修改了原状态数组，虽然之后调用了setState，但传递的还是原数组的引用；
• 在child_changed里，你直接遍历原数组修改内部的note对象，之后同样把原数组引用传给setState，React检测不到变化。

修复后的代码 #

直接修改这两个回调函数的逻辑，始终保持状态更新的不可变性：

constructor() {
  super();
  this.app = firebase.initializeApp(DB_CONFIG);
  this.database = this.app.database().ref().child('notes');
  this.state = {
    notes: [],
  };
}

componentDidMount() {
  this.database.on('child_added', snap => {
    // 创建新数组，不修改原state数组
    const newNotes = [...this.state.notes, new Note(snap.key, snap.val().noteContent)];
    this.setState({ notes: newNotes });
  });

  this.database.on('child_changed', snap => {
    // 遍历原数组，返回新的数组和新的note对象（修改时）
    const updatedNotes = this.state.notes.map(note => {
      if (snap.key === note.id) {
        // 返回新的note对象，不修改原对象
        return {
          ...note,
          noteContent: snap.val().noteContent
        };
      }
      return note;
    });
    this.setState({ notes: updatedNotes });
  });
}

// addNote和changeNote逻辑不变
addNote(note) {
  this.database.push().set({ noteContent: note });
}

changeNote(id, note) {
  this.database.child(id).update({ noteContent: note });
}

render() {
  return (
    <div>
      <div>
        { this.state.notes.map(note => {
          return (
            <NoteComponent
              noteContent={note.noteContent}
              noteId={note.id}
              key={note.id}
              changeNote={this.changeNote.bind(this)}
            />
          )
        }) }
      </div>
      <div></div>
      <NoteFormComponent addNote={this.addNote.bind(this)} />
    </div>
  );
}

为什么这样改能解决问题？ #

1. 不可变更新：每次状态变化时，我们都创建了新的数组（[...this.state.notes]）或新的对象（{...note, noteContent: ...}），这样setState传递的是全新的引用，React能立刻感知到状态变化，触发重新渲染；
2. 避免直接操作state：永远不要直接修改this.state里的内容，所有状态更新都应该通过setState完成，这是React的核心原则之一。

这样修改后，当Firebase里的笔记内容更新时，你的组件就能正确渲染最新的内容了。

内容的提问来源于stack exchange，提问作者PepeFiStach