Как подтолкнуть JSON к состоянию массива Mobx в реакции

Question

Я сейчас использую mobx в React с firebase.
Во-первых, существует «projectState» в виде пустого массива.
Во-вторых, после получения данных из firestore они переводятся в состояние Mobx.
Это мой код.

 @observable projectState = {
    projects: []
  };

  projectGet = () => {
    firebase
      .firestore()
      .collection("projects")
      .doc("DkBFcdAOAWWl8Az")
      .get()
      .then(done => {
        const projectsTotal = JSON.stringify(done.data());
        this.projectState.projects.push(projectsTotal);

      });
  };

done.data () 'дает файл типа json, как показано ниже.

{"id": "3", "title": "good"}

Однако, когда я использую «console.log» для проверки состояния после отправки данных.
это дает мне, как показано ниже.

   Proxy {0: "{"content":"asdf","id":"123","title":"yoman"}", 
1: "{"content":"asdf","id":"123","title":"yoman"}",
 Symbol(mobx administration): ObservableArrayAdministration}

Как я могу перевести данные json в состояние mobx?

Answer 1

Вы конвертируете возвращенный объект в строку, когда вы const projectsTotal = JSON.stringify(done.data());

Вы можете изменить его, чтобы назначить только данные.

 @observable projectState = {
    projects: []
  };

  projectGet = () => {
    firebase
      .firestore()
      .collection("projects")
      .doc("DkBFcdAOAWWl8Az")
      .get()
      .then(done => {
        this.projectState.projects.push(done.data());
      });
  };

Кроме того, из строковых значений я вижу, что Firebase возвращает литерал объекта, вам, вероятно, нужно преобразовать его в массив и передать каждый элемент отдельно.

Вы можете использовать Object.values, чтобы получить массив значений.

@observable projectState = {
    projects: []
  };

  projectGet = () => {
    firebase
      .firestore()
      .collection("projects")
      .doc("DkBFcdAOAWWl8Az")
      .get()
      .then(done => {
        Object.values(done.data())
              .forEach((value) => {this.projectState.projects.push(value)});
      });
  };