1

我使用 react 在 javascript 中创建了一个待办事项列表，因为我是 react 的初学者，所以我使用“this.state”在多个组件中更改我的应用程序的状态，我的问题是在面试时我被分配了一项任务使用 mobx 创建待办事项列表来运行其状态，但是经过长时间的研究，我仍然有很多转换我的反应项目的“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>
    )
}
}
4

1 回答 1

0

因此，mobx 与其他常见的 react 状态管理系统不同，mobx鼓励可变状态。因此，您不必做所有额外的样板来防止您的状态被变异，您只需通过更改您想要更改的“简单”方式来进行更改。

例如，假设您有一组具有 adescription和isFinished属性的 todo 对象。在 Mobx 中，您只需带上待办事项并将todoItem.isFinished = true待办事项设置为 true/checked。Mobx 负责其余的工作，并通知相关组件进行更新。因此，在使用 mobx 时，您很少需要调用 this.setState。任何更改（对可观察对象）都会自动更新状态。

如果你没有使用 Mobx，你需要确保你从未改变过一个值，而是返回一个新的对象副本，唯一的区别是你想要的改变。我相信这就是您在_对象上使用方法的原因：它们可以帮助您在不改变值的情况下进行更改（尽管看起来您仍然不小心改变了一些东西）。

为了换取这种简单性，您需要确保一些事情：您正在变异的对象需要是observable，以及呈现它们的组件需要是observers。（参见mobx 文档）

另外，请记住，mobx 会观察属性何时更改，而不是变量值何时更改。所以 mobx 可以观察到这种变化：foo.bar = "new value"但不能观察到这种变化：（let foo = 'initial value'; foo = 'new value'注意.第一个例子中的 ）。

因为这是一道测试题，所以我不会为你修复代码，但我会推荐你​​参考mobx 示例 todo app，希望对你有所帮助。

于 2019-07-02T22:53:48.530 回答