Mobx Obervable Verursachung Nicht Observer Komponente

Question

die Anforderung aktualisieren ist:

1. wenn Benutzereingaben in DayView Komponente ändert, wird die Anzahl der Schichten in diesem Tag Instanz auf den Eingangswert geändert (dh 4 in Eingabemittel day.shifts.length == 4)

2. wenn day.shifts ändert, dann

   gemacht werden DayView.renderShifts verursacht Zeilen N zu

Die Änderung des Eingabewerts funktioniert jedoch, aber der DayView.render wird nur einmal aufgerufen. Es sollte nach dem Tag erneut aufgerufen werden.

Was fehlt mir?

Hier ist meine Beobachter Komponenten:

//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; 

Und hier ist die mobx Seite:

//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; 

Answer 1

Sie nie Ihre shifts ein neues Array zuweisen. Verwenden Sie replace, so dass Sie den Verweis auf Ihre beobachtbare Array nicht überschreiben:

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