从动作计算mobx值

我目前正在重构一个FreeCodeCamp repo，作为学习mobx的一种方式。我试图做的是计算

this.store.studentCount

，正如您在StudentModal组件中看到的那样。请看这里：

这是我的

/client/src/components/students/Modal.js

@observer
@inject('StudentModal')
export default class StudentModal extends Component {

  store = new this.props.StudentModal()

  renderStudentCount() {
    let message
    if (this.store.studentCount > 1) {
      message = `${this.store.studentCount} students`
    } else {
      message = `${this.store.studentCount} student`
    }
    return <div id="student-count">{message}</div>
  }

  render() {
    return (
      <div className="AddStudentForm">
        <div className="class-table-button-container">
          <Button
            onClick={this.open}
          >
            Add Student
          </Button>
          {this.renderStudentCount()}
        </div>
        .....
    )
  }
}

import { observable, action } from 'mobx'
import StudentsService from '../../services/StudentsService'

export default class StudentModal {    
  @observable open = true

  @observable studentCount = 0

  @action
  fetchStudents() {
    StudentsService.fetchStudents().then(response => {
      const studentCount = response.body
      this.studentCount = studentCount.length
    })
  }
}

您可以在这里查看完整的源代码：我应该提醒您这是开源的

---

我这样做对吗？你有什么反馈吗？

似乎有一些小问题：

相同的类名 这可能会导致问题，因为store和react组件都被称为

StudentModal

装饰订单 正如@Joseph建议的那样，在课堂上交换顺序：

@inject("StudentModal")
@observer
export default class StudentModal

国家管理 在创建每个StudentModal时，您似乎创建了一个新的状态存储。通常，te存储在您的入口点内实例化一次（除非您确实希望每个模式有单独的存储），然后在以后使用：

import { render } from "react-dom";
import { Provider } from "mobx-react";
var stores = { StudentModal: new StudanModalStore() }
render(
        <Provider {...stores}>
            <StudentModal />
        </Provider>,
    rootEl,
);

@observer
@inject('StudentModal')
export default class StudentModal extends Component {
    //used getter instead of setting once
    // no longer use `new` but directly reference instance of the store. 
    get store (): StudentModalStore { return this.props.StudentModalas; }

}

从“react dom”导入{render}；
从“mobx react”导入{Provider}；
var stores={StudentModal:new StudanModalStore（）}
渲染(
,
罗特尔，
);
@观察者
@注入（'StudentModal'）
导出默认类StudentModal扩展组件{
//使用getter而不是设置一次
//不再使用'new'，而是直接引用存储实例。
get store（）：StudentModalStore{返回this.props.StudentModalas；}
}

---

上面的代码是用typescript编写的。

当同时使用observer和InjectDecorator时，应该首先应用observer Decorator（最接近类声明）。我可以在同一个类上注入两个存储吗？例如，我需要计算一个数组的长度，但它位于另一个组件中。我怎么处理呢？你可以随意注射。但是，不能以干净的方式使用同级或子组件的状态。在React哲学中，您必须将状态向上拉到公共父级，或者因为您使用的是mobx，您实际上可以将其完全拉出您的组件，并为该状态定义一个单独的“存储”，这可能是最干净的解决方案。我甚至不相信在写这篇文章时我有相同的类名（@JosephChambers碰巧发生在我们中最好的人身上，尝试用Store来防止（尽管有人说这是一种代码气味）Store；-）

import { render } from "react-dom";
import { Provider } from "mobx-react";
var stores = { StudentModal: new StudanModalStore() }
render(
        <Provider {...stores}>
            <StudentModal />
        </Provider>,
    rootEl,
);

@observer
@inject('StudentModal')
export default class StudentModal extends Component {
    //used getter instead of setting once
    // no longer use `new` but directly reference instance of the store. 
    get store (): StudentModalStore { return this.props.StudentModalas; }

}