reactjs - MobX + React - 变得可观察以在外部组件中重新渲染

Question

我一直在使用 MobX + React + React Sortable Hoc ( https://github.com/clauderic/react-sortable-hoc )

而且我无法动态地将新项目添加到可排序列表并使其立即显示。如果您单击“添加另一个”按钮几次将新项目推送到列表，然后对列表中的项目重新排序，只有这样列表才会更新以显示所有项目:

https://jsfiddle.net/56s57ryb/

使用它作为商店:

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

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

我已经兜圈子很多年了，在互联网上上下搜索，但我似乎无法确定我哪里出错了。有谁知道这是怎么回事吗？

Answer 1

您的 react 组件未标记为观察者。请参阅https://jsfiddle.net/56s57ryb/1/更新的 fiddle 。例如:

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