Mobx 对象解构道具说明

Question

在 TodoListView 中，为什么我不能将 { todoList } 替换为 props.todoList 并将 todoList 的以下实例替换为 props.todoList 以获得相同的结果？

import * as React from "react";
import { render } from "react-dom";
import { observer } from "mobx-react-lite";
import { makeObservable, observable, computed, action } from "mobx";

class Todo {
  id = Math.random();
  title = "";
  finished = false;

  constructor(title) {
    makeObservable(this, {
      title: observable,
      finished: observable,
      toggle: action
    });
    this.title = title;
  }

  toggle() {
    this.finished = !this.finished;
  }
}

class TodoList {
  todos = [];
  get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
  }
  constructor(todos) {
    makeObservable(this, {
      todos: observable,
      unfinishedTodoCount: computed
    });
    this.todos = todos;
  }
}

const TodoListView = observer(({ todoList }) => (
  <div>
    <ul>
      {todoList.todos.map(todo => (
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>
    Tasks left: {todoList.unfinishedTodoCount}
  </div>
));

const TodoView = observer(({ todo }) => (
  <li>
    <input
      type="checkbox"
      checked={todo.finished}
      onClick={() => todo.toggle()}
    />
    {todo.title}
  </li>
));

const store = new TodoList([
  new Todo("Get Coffee"),
  new Todo("Write simpler code")
]);
render(<TodoListView todoList={store} />, document.getElementById("root"));

为什么这行不通？

const TodoListView = observer((props.todoList) => (
  <div>
    <ul>
      {props.todoList.todos.map(todo => (
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>
    Tasks left: {props.todoList.unfinishedTodoCount}
  </div>
));

我的codesandbox

Answer 1

我认为参数传递需要改变

observer((props.todoList) => {})

to

observer((props) => {})

Mobx 对象解构道具说明

Mobx object destructuring props clarification

javascript

reactjs

mobx