MobX + Reagieren - Getting beobachtbaren innerhalb einer externen Komponente neu machen

Question

ich mit MobX herumgespielt wurde + + Reagieren Reagieren Sortable Hoc (https://github.com/clauderic/react-sortable-hoc)

Und ich bin nicht in der Lage ein neues Element in der sortierbare Liste hinzufügen dynamisch und lassen es sofort erscheinen. Wenn Sie einige Male auf die Schaltfläche "Eine weitere hinzufügen" klicken, um neue Elemente in die Liste zu verschieben und dann ein Element in der Liste neu zu ordnen, wird die Liste aktualisiert, sodass alle Elemente angezeigt werden:

https://jsfiddle.net/56s57ryb/

dies als Speicher verwenden:

let appState = mobx.observable({ 
    todos: [ 'yellow', 'blue', 'red' ] 
}) 

appState.addTodo = function() { 
    appState.todos.push('new one') 
} 

ich habe in Kreisen für Alter gehe um worden und suchte im Internet nach oben und unten, aber ich kann nicht genau zu bestimmen scheinen, wo ich falsch gehe. Weiß jemand was los ist?

Answer 1

Ihre reagierenden Komponenten wurden nicht als Beobachter markiert. Eine aktualisierte Geige finden Sie unter https://jsfiddle.net/56s57ryb/1/. Zum Beispiel:

const SortableItem = SortableElement(mobxReact.observer(({value}) => <li className="SortableItem">{value}</li>));