Как редактировать информацию документа в базе данных, используя React + Firebase? Невозможно вызвать setState для компонента, который еще не смонтирован

Question

Я использую реагирование и пожарную базу для своего проекта Во-первых, я отображаю некоторую информацию о пользователе, но затем я хочу отредактировать ее, нажав «изменить», и я получаю ошибку:

Невозможно вызвать setState для компонента, который еще не смонтирован. Это нет, но это может указывать на ошибку в вашем приложении. Вместо, присваивать this.state напрямую или определять state = {}; класс свойство с желаемым состоянием в EditBookComponentForm компонент.

Затем нажмите кнопку для редактирования, чтобы отобразить EditBookComponentForm, и первое значение входных строк должно быть таким же, как в базе данных. Как исправить эту ошибку?

import React, {Component} from 'react';
import firebase from '../firebase/firebase.js';
import AddBookComponentForm from '../addBookComponentForm/AddBookComponentForm'
import EditBookComponentForm from '../editBookComponentForm/EditBookComponentForm'


export default class BooksComponent extends Component{
  EditBookComponentForm = new EditBookComponentForm();
  constructor(props) {
    super(props)
    this.state = {
      books: null,
      status: false
    }
    this.getBook = this.getBook.bind(this);
  }
  componentDidMount() {
    this.getBook();
  }
  getBook =() =>{
    const newArray = [];
    const selfThis = this;
    console.log("i am working")
    const db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true
    });
    db.collection("LibraryDB").where("user", "==",
      firebase.auth().currentUser.uid)
      .get()
      .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
              console.log(doc.id, " => ", doc.data());
              let bookWithId = doc.data()
              bookWithId.id = doc.id
              newArray.push(bookWithId);
          });
          //console.log(newArray);
          selfThis.setState({
            books: newArray
          });
          console.log("My work has ended")
      })
      .catch(function(error) {
          console.log("Error getting documents: ", error);
      });
  };
  deleteBook = id => {
      const db = firebase.firestore();
      this.setState(prevState => ({
        books: prevState.books.filter(el => el.id !== id)
      }));
      db.collection("LibraryDB").doc(id).delete()
      .then(function() {
          console.log("Document successfully deleted!");
      }).catch(function(error) {
          console.error("Error removing document: ", error);
      });
    };

  editBook = (id,auth,name) =>{
    this.EditBookComponentForm.updateState(id,auth,name);
  };

  renderBooks(arr) {
    console.log("items",arr)
     return arr.map(book => {
       return (
           <tr key={book.id}>
               <td>
                 <p>{book.author}</p>
                 <p>{book.bookName}</p>
                 <button
                     onClick= {() => { this.editBook(book.id, book.author, book.bookName) }}>
                     Edit
                 </button>
                 <button
                   onClick={() => { this.deleteBook(book.id) }}>
                   Delete
                 </button>
               </td>
           </tr>
       );
     });
   }

  render(){
    if(!this.state.books){
      return <p>0000000</p>;
    }
    return(
      <div>
        <AddBookComponentForm updateBooksComponent={this.getBook} />
        {this.state.status ? <EditBookComponentForm/> : <null/>}
          <table>
            <tbody>
             <tr>
                 <th>Author </th>
                 <th>Book name</th>
             </tr>
                {this.renderBooks(this.state.books)}
             </tbody>
          </table>
      </div>
  )};
};

Второй файл:

import React, { Component }  from 'react';
import firebase from '../firebase/firebase.js';

export default class EditBookComponentForm extends Component{

  state = {
      bookName:'',
      author:'',
      id:''
  };
  updateState(id,auth,name){
    this.setState({
      bookName: name,
      author: auth,
      id: id
    })
  };


  onChangeInputBookName = (event) => {
    this.setState({bookName: event.target.value})
  };
  onChangeInputAuthor = (event) => {
    this.setState({author: event.target.value})
  };
  editBook = (id) =>{
     const db = firebase.firestore();
     db.collection("LibraryDB").doc(id).set({
       bookName: this.state.bookName,
       author: this.state.author
     })
     .then(function() {
       console.log("Document successfully written!");
     })
     .catch(function(error) {
       console.error("Error writing document: ", error);
     });
  };

render(){
  return(
    <div>
    <form className="null">
        <input type='text'
               value = {this.state.author}
               onChange ={ this.onChangeInputAuthor }/>
        <input type='text'
               value = {this.state.bookName}
               onChange ={ this.onChangeInputBookName }/>
        <button
            onClick={() => { this.editBook(this.state.id) }}>
            Edit
        </button>
    </form>
    </div>
  )} ;
};

Answer 1

Ошибка говорит о том, что вы пытались установить состояние до того, как оно было изначально настроено в EditBookComponentForm. Поэтому добавьте конструктор к этому компоненту и установите его состояние следующим образом:

constructor() {
  this.state = {
    bookName:'',
    author:'',
    id:''
  };
}

Answer 2

Итак, я бы не стал клонировать и обновлять состояние из ссылки this., вы должны передать реквизиты до <EditBookComponentForm {...desiredProps} />

Так, например:

  editBook = (id, auth, name) =>{
    this.setState({ bookprops: { bookName: id, author: auth, bookName: name } });
  };

 {this.state.status ? <EditBookComponentForm editProps={this.state.bookprops} /> : <null/>}

И тогда вы можете в своем компоненте EditBookComponentForm достичь пропущенных в реквизитах this.props.editProps

Что значит ниже, можно удалить в вашей EditBookComponentForm

updateState(id,auth,name){
    this.setState({
      bookName: name,
      author: auth,
      id: id
    })
  };