Question

我目前正在重构一个FreeCodeCamp回购作为学习mobx的方法。正如您在StudentModal组件中看到的那样，我尝试做的是计算this.store.studentCount。看看这里：

这是我的/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>
        .....
    )
  }
}

看看我的Modal组件的模型，你可以看到我需要获取服务来获取它的长度，但无论出于何种原因我都无法将studentCount设置为新值。

这是我的/client/src/models/students/Modal.js

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
    })
  }
}

您可以在这里查看完整的源代码：https://github.com/imcodingideas/classroom-mode/tree/mobx-migration我应该提醒您这是开源的。

我这样做是否正确？你有什么反馈意见吗？

Answer 1

似乎有一些小事：

相同的班级名称

这可能会导致问题，因为您的商店和反应组件都被称为[HttpPost] public ActionResult Login(string username, string password) { // use your code loged in return Json(true, JsonRequestBehavior.AllowGet); }

装饰者订单

正如@Joseph建议的那样交换你班级的顺序：

StudentModal

国家管理

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

在创建每个StudentModal时，您似乎创建了一个新的状态存储。通常情况下，te商店会在您的入口点内实例化一次（除非您真的需要每个模态单独存储），然后再使用：

 store = new this.props.StudentModal()

上面的代码是打字稿。

从行动中计算出mobx值

1 个答案:

相同的班级名称

装饰者订单

国家管理