Реагируйте this.setState, не обновляя мое значение, на firebase отображаются изменения

Question

У меня проблема с моим кодом. Я пытаюсь сделать заметки в реагировать + огонь. Добавление примечаний к fireabse работает, и setState показывает их, но если я хочу изменить значение примечания, второй setState не меняет его, но в firebase примечание изменит свое значение.

Вот мой код

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 => {
   this.state.notes.push(new Note(snap.key, snap.val().noteContent));
   this.setState({
     notes: this.state.notes
   });
 });

 this.database.on('child_changed', snap => {
   this.state.notes.forEach(note => {
     if(snap.key === note.id) {
       note.id = snap.key;
       note.noteContent = snap.val().noteContent;
     }
   });
  this.setState({
     notes: this.state.notes,
   });
 });
}

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)}>
            </NoteComponent>
          )
        })
      }
  </div>

  <div>

  </div>
    <NoteFormComponent 
      addNote={this.addNote.bind(this)}>
    </NoteFormComponent>
  </div>
);

}

Спасибо за помощь.

Answer 1

Вы должны сделать что-то вроде этого:

const newNotes = [...this.state.notes]
const newNode = {
  id: snap.key,
  noteContent: snap.val().noteContent,
}
newNotes.push(newNode)
this.setState({
     notes: newNotes,
});

Вы не можете просто нажать, вам нужно заменить массив узлов новым массивом.необходимо соблюдать неизменность, чтобы сказать, реагировать на повторное отображение

Answer 2

Проблемные строки:

this.state.notes.push(new Note(snap.key, snap.val().noteContent));

или

 this.state.notes.forEach(note => {
     if(snap.key === note.id) {
       note.id = snap.key;
       note.noteContent = snap.val().noteContent;
     }
   });
  this.setState({
     notes: this.state.notes,
   });

Вы не можете изменить значение состояния следующим образом. Вы должны использовать setState. Чтобы это исправить, нужно:

1. копировать (глубокое клонирование) массив состояний (Вы должны использовать ImmutableJS, но это будет работать для тестирования: const copiedArray = JSON.parse(JSON.stringify(array)))
2. Внести изменения в скопированный массив copiedArray.
3. setState('notes', copiedArray)

Другие предложения:

Я бы предложил вам сделать следующее. Изолируйте слой огненной базы от слоя просмотра. Смешивать обязанности компонента с коммуникацией db не рекомендуется. После того, как вы это сделаете. Вы передадите список заметок снаружи компонента. И любой метод, работающий с базой данных (firebase в вашем случае также станет параметром.)

// Notes Container
    const notes = FireBaseConnector.getNotes();
    const {
        add,
        edit,
        delete,
    } = FireBaseConnector

    <Notes notes={notes}
         onAdd={add}
         onEdit={edit}
         onRemove={delete}
    />