mobx 有bug 的 todolist (待修改)

import React, { Component, useEffect } from 'react';
import './App.css';
import { observable, computed, action } from 'mobx';
import { observer,Provider,inject } from 'mobx-react'

//数据结构
class Todo {

@observable todos = [
    {
        id: 1,
        title: '任务1',
        finished: true
    }, {
        id: 2,
        title: '任务2',
        finished: false
    }
];

@computed get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
}

@action delTodo(id) {
    console.log('删除');
    this.todos = this.todos.filter(todo => todo.id !== id);
    console.log(this.todocs);
}

@action updateTodo(id,done) {
    console.log('update');
    const newTodos = this.todos.map((todoObj)=>{
        if(todoObj.id === id) return {...todoObj,done}
        else return todoObj
    })
    this.todos = newTodos;
}

}

@observer
class TodoListView extends Component {

updateTodo = (todoId,done) => {
    this.props.todoList.delTodo(todoId,done)
}
delTodo = (todoId) => {
    this.props.todoList.delTodo(todoId)
}
render() {
    return (
        

            

                {this.props.todoList.todos.map(todo =>
                    
                )}
            
            未完成任务数：{this.props.todoList.unfinishedTodoCount}
        
    )

}

}

@observer
class TodoView extends Component {

render() {
    // return 
{this.props.todo.title}
;
    var todo = this.props.todo;
    return (
        

            
                 this.props.updateTodo(todo.id,todo.finished)}
                />

                {todo.title}
            
             this.props.delTodo(todo.id)}>del
        
    )
}

}

const todoList = new Todo();

const ToDoApp = inject('todoList')(observer(({todoList}) => {

useEffect(() => {
    console.log('hhhh');
})
return (
    

        
    
)

}))

class App extends Component{

render(){
    return (
        
            

                
            
        
        
    );
}

}
export default App;