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

最新推荐文章于 2025-08-01 15:08:15 发布

原创最新推荐文章于 2025-08-01 15:08:15 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

8 篇文章

订阅专栏

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

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}>
                {
                    toDos.length 
                    ? toDos.map(item => {
                        return <ListItem 
                            key={item.id}
                            {...item}
                            handleChange={handleChange}
                        />
                    })
                    : <h3>your to do list is empty</h3>
                }
            </ul>
        );
    }
}

问题描述: 执行addToDo可以打印最新的toDos数据，但是ToDoList组件并未更新

解决方案：1 使用mobx中的makeObservable方法 2 降低mobx的版本（当前使用的版本mobx：^6.3.2，mobx-react：7.2.0）
备注：此方案参考吃柠檬的猫的博客

方案1代码如下：

class ToDoStore {
    constructor() {
        makeObservable(this);
    }
}

export default new ToDoStore();