Javascript Mobx Obervable未导致观察者组件更新

要求是：

当用户更改DayView组件中的输入时，该日实例中的班次数将更改为输入值（即，输入中的4表示day.Shift.length==4）

当day.shift更改时，DayView.rendershift会导致渲染N行

但是，更改输入值是有效的，但是DayView.render只调用一次。应在白天之后再次调用。班次已更改

我错过了什么

这是我的观察员组件：

//App.js
import React from 'react';
import store from './ShiftStore';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';

@observer class ShiftList extends React.Component {
  render() {
    return (
      <div>
        { store.days.map(
          (day, idx) => <DayView day={ day } key={ idx } />
        ) }
      </div>
    );
  }
}

@observer class DayView extends React.Component {
  renderShifts(day) {
    var rows = [];
    toJS(day.shifts).forEach(function(s) {
      rows.push(<div>Shift Row</div>)
    })
    return rows;
  }

  render() {
    const day = this.props.day;
    return (
      <div>
        <input
          type="number"
          onChange={(e) => day.resizeShifts(e.target.value)}/>
        {this.renderShifts(day)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <ShiftList/>
      </div>
    );
  }
}

export default App;

//ShiftStore.js
import React from 'react';
import {observable, computed, action, toJS } from 'mobx';

class Shift {
   @observable startTime = 10;
   @observable endTime = 9;
   @computed get duration() {
     let { startTime, endTime } = this;
     return endTime - startTime;
   }
}

class Day {
  @observable shifts = [];
  @action resizeShifts(n) {
    if (n < 0 || n % 1 !== 0) return;
    let { shifts, _resize } = this;
    let shiftArr = toJS(shifts);
    _resize(shiftArr, n, new Shift());
    shifts = shiftArr;
  }
  _resize(arr, newSize, defaultValue) {
      while(newSize > arr.length)
          arr.push(defaultValue);
      arr.length = newSize;
  }
}

class ShiftStore {
  constructor(props) {
    this.addDay = this.addDay.bind(this);
  }
  @observable days = [new Day()];
  addDay() { this.days.push(new Day()); }
}

const shiftStore = new ShiftStore();
export default shiftStore;

//App.js
从“React”导入React；
从“/ShiftStore”导入存储；
从'mobx react'导入{observer}；
从“mobx”导入{toJS}；
@观察者类移位列表扩展了React.Component{
render（）{
返回(
{store.days.map(
（日，idx）=>
) }
);
}
}
@观察者类DayView扩展React.Component{
渲染班次（天）{
var行=[]；
toJS（日班制）.forEach（函数）{
行。按（移动行）
})
返回行；
}
render（）{
const day=this.props.day；
返回(
day.resizeShifts（e.target.value）}/>
{this.rendershift（day）}
);
}
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

这是mobx的一面：

//App.js
import React from 'react';
import store from './ShiftStore';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';

@observer class ShiftList extends React.Component {
  render() {
    return (
      <div>
        { store.days.map(
          (day, idx) => <DayView day={ day } key={ idx } />
        ) }
      </div>
    );
  }
}

@observer class DayView extends React.Component {
  renderShifts(day) {
    var rows = [];
    toJS(day.shifts).forEach(function(s) {
      rows.push(<div>Shift Row</div>)
    })
    return rows;
  }

  render() {
    const day = this.props.day;
    return (
      <div>
        <input
          type="number"
          onChange={(e) => day.resizeShifts(e.target.value)}/>
        {this.renderShifts(day)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <ShiftList/>
      </div>
    );
  }
}

export default App;

//ShiftStore.js
import React from 'react';
import {observable, computed, action, toJS } from 'mobx';

class Shift {
   @observable startTime = 10;
   @observable endTime = 9;
   @computed get duration() {
     let { startTime, endTime } = this;
     return endTime - startTime;
   }
}

class Day {
  @observable shifts = [];
  @action resizeShifts(n) {
    if (n < 0 || n % 1 !== 0) return;
    let { shifts, _resize } = this;
    let shiftArr = toJS(shifts);
    _resize(shiftArr, n, new Shift());
    shifts = shiftArr;
  }
  _resize(arr, newSize, defaultValue) {
      while(newSize > arr.length)
          arr.push(defaultValue);
      arr.length = newSize;
  }
}

class ShiftStore {
  constructor(props) {
    this.addDay = this.addDay.bind(this);
  }
  @observable days = [new Day()];
  addDay() { this.days.push(new Day()); }
}

const shiftStore = new ShiftStore();
export default shiftStore;

//ShiftStore.js
从“React”导入React；
从“mobx”导入{observable，computed，action，toJS}；
班次{
@可观测起始时间=10；
@可观察到的结束时间=9；
@计算的获取持续时间（）{
让{startTime，endTime}=这个；
返回结束时间-开始时间；
}
}
上课日{
@可观测位移=[]；
@动作大小调整移位（n）{
如果（n<0 | | n%1！==0）返回；
设{shifts，_resize}=this；
设shiftar=toJS（班次）；
_调整大小（shiftar，n，new Shift（））；
移位=移位器；
}
_调整大小（arr、newSize、defaultValue）{
while（newSize>arr.length）
arr.push（默认值）；
arr.length=新闻大小；
}
}
类移位存储{
建造师（道具）{
this.addDay=this.addDay.bind（this）；
}
@可观察天数=[新天数（）]；
addDay（）{this.days.push（new Day（））；}
}
const shiftStore=新的shiftStore（）；
导出默认移位存储；

您永远不会为

班次分配新数组。使用，以免覆盖对可观察数组的引用：

@action resizeShifts(n) {
  if (n < 0 || n % 1 !== 0) return;
  let { shifts, _resize } = this;
  let shiftArr = toJS(shifts);
  _resize(shiftArr, n, new Shift());
  this.shifts.replace(shiftArr);
}

@action resizeShifts（n）{
如果（n<0 | | n%1！==0）返回；
设{shifts，_resize}=this；
设shiftar=toJS（班次）；
_调整大小（shiftar，n，new Shift（））；
本.换档.更换（换档器）；
}
@JackRobson太棒了！很高兴我能帮忙。