mobx中observable数据更新，响应式组件未更新

最新推荐文章于 2024-04-11 22:16:59 发布

adam_De

最新推荐文章于 2024-04-11 22:16:59 发布

阅读量1.4k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/adam_De/article/details/119675774

版权

博客讲述了在MobX中遇到observable数据更新，但响应式组件未能随之更新的问题。作者提供了问题代码，显示在执行addToDo方法后，虽然能通过打印看到数据已更新，ToDoList组件却未反映出变化。解决方案包括使用makeObservable方法和降级MobX版本。参考了'吃柠檬的猫'的博客，方案1中详细展示了使用makeObservable的代码实现。

摘要由CSDN通过智能技术生成

mobx中observable数据更新，响应式组件未更新

先上代码，说明问题：
store：

@observable toDoLists = []
@computed get toDos() {
   const [ALL, DONE, UNDONE] = this.filterTypes;
   switch (this.filterType) {
       case DONE:
           return this.toDoLists.filter(item => !!item.done)
       case UNDONE:
           return this.toDoLists.filter(item => !item.done)
       case ALL:
       default:
           return this.toDoLists;
   }
}
@action.bound addToDo(text) {
   this.toDoLists.unshift({
        text,
        id: Date.now(),
        done: false
    })
    console.log('todo list', this.toDos, this.toDoLists)
}

响应式组件：

@observer
class ToDolist extends Component {
    render() {
        const { toDos, handleChange } = this.props.store;
        return (
            <ul className={list_ul}>
                {