javascript - 如何在 react 中将json推送到Mobx的数组状态

Question

我现在在 React 中使用 mobx 和 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)});
      });
  };