Question

我已经使用React在JavaScript中创建了一个待办事项列表，因为我是React的初学者，因此我已经使用“ this.state”来更改多个组件中应用的状态，我的问题是我在接受工作面试时给出了使用mobx创建待办事项列表以运行其状态的任务，但是经过长期的研究，我仍然遇到很多转换我的React项目的“ this.state.todo”的问题，这是主要的应用程序组件在代码中，我希望演示如何将状态转换为mobx观察者/可观察者，如果需要更多组件，我希望将它们添加进来

import React from 'react';
import _ from 'lodash';
import TodoCreate from './todo-create';
import TodoList from './todo-list';
import 'semantic-ui-css/semantic.min.css';
import { Header } from 'semantic-ui-react';
import {decorate, observable} from "mobx"
import {observer} from "mobx-react"
export default class App extends 
React.Component {

constructor(props) {
    super(props);

    this.state = {
       todos : todos
    }

    this.createTask = this.createTask.bind(this);
    this.saveTask = this.saveTask.bind(this);
    this.deleteTask = this.deleteTask.bind(this);
    this.toggleTask = this.toggleTask.bind(this);
}

createTask(task) {
    this.state.todos.push({
        task,
        isCompleted: false,
        creationDate:new Date().toLocaleTimeString() + new Date().toLocaleDateString(),
        updateDate:new Date().toLocaleTimeString() +  new Date().toLocaleDateString()
    });
    this.setState({ todos: this.state.todos });
}

deleteTask(taskToDelete) {
    _.remove(this.state.todos, todo => todo.task === taskToDelete);
    this.setState({ todos: this.state.todos });
}

saveTask(oldTask, newTask) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === oldTask);
    foundTodo.task = newTask;
    foundTodo.updateDate = new Date().toLocaleTimeString() +  new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

toggleTask(task) {
    const foundTodo = _.find(this.state.todos, todo => todo.task === task);
    foundTodo.isCompleted = !foundTodo.isCompleted;
    foundTodo.updateDate = new Date().toLocaleTimeString() + '' + new Date().toLocaleDateString();
    this.setState({ todos: this.state.todos });
}

render() {
    return (
        <div>
            <div className="wrap">
            <div className="header">
                <Header as="h2" className="headerclass">ls-tech Todo-list</Header></div>
                  <div className="wrap-list">

            <div className="td-list-con">

                <TodoCreate
                    todos={this.state.todos}
                    createTask={ this.createTask}
                    />

                <TodoList
                    todos={ this.state.todos }
                    saveTask={ this.saveTask }
                    deleteTask={ this.deleteTask }
                    toggleTask={ this.toggleTask }
                    />
               </div>
            </div>
        </div>
    </div>
    )
}
}

Answer 1

因此，mobx与其他通常会做出反应的状态管理系统有所不同，即mobx鼓励可变的状态。因此，您不必做所有额外的样板操作来保持状态不变，而只需通过更改要更改的“简单”方式进行更改即可。

例如，假设您有一个具有description和isFinished属性的待办事项对象集合。在Mobx中，您只需带上待办事项和todoItem.isFinished = true即可将待办事项设置为true / checked。 Mobx负责其余的工作，并通知相关组件进行更新。结果，使用mobx时几乎不需要调用this.setState。任何更改（对observable对象的更改）都会自动更新状态。

如果您不使用Mobx，则需要确保您从未更改过值，而是返回了该对象的新副本，唯一的不同就是所需的更改。我相信这就是您使用_对象上的方法的原因：它们可帮助您进行更改而无需更改值（尽管看起来您仍然在不小心地更改内容）。

以这种简单性作为交换，您需要确保以下几点：要变异的对象必须是observable，而呈现它们的组件也必须是observers。（请参见mobx documentation）

Also，请记住，当 properties 更改时，mobx会观察，而变量值更改时，mobx不会观察。因此，mobx可以观察到以下更改：foo.bar = "new value"，但不能观察到以下更改：let foo = 'initial value'; foo = 'new value'（请注意第一个示例中的.）。

因为这是一个测试问题，所以我不会为您修复您的代码，但是我会向您推荐mobx example todo app，希望对您有所帮助。

使用this.state将React应用程序转换为mobx

1 个答案: