通过 axios 填充状态时遇到问题

Question

我正在尝试使用简单的 json API (json-server --watch db.json) 来填充通量存储的状态。我正在从父组件的componentWillMount 调用 store 的函数来使用 Axios 加载数据。

我一直在查看以下教程以供参考： http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/ https://www.toptal.com/react/tips-and-practices 和其他人。

这是我要提取的 JSON 数据：

[
  {
    "complete": "false",
    "edit": "false",
    "id": "uuid()",
    "text": "Go Shopping"
  },
  {
    "complete": "false",
    "edit": "false",
    "id": "uuid()",
    "text": "Pay Water Bill"
  }
]

db.json 要点https://gist.github.com/WebRuin/548f6073ca533016503d34c36116b8de

这是我打电话的 Flux 商店的摘录：

import { EventEmitter } from 'events'
import dispatcher from '../dispatcher'
import axios from 'axios'

import uuid from 'uuid4'

class TodoStore extends EventEmitter {
  constructor() {
    super()
    this.state = {
      todos: [],
      showCompletedTodos: true,
      showIncompletedTodos: true
    }

    this.deleteTodo = this.deleteTodo.bind(this)
    this.toggleTodo = this.toggleTodo.bind(this)
    this.toggleShowCompletedTodos = this.toggleShowCompletedTodos.bind(this)
    this.toggleShowIncompletedTodos = this.toggleShowIncompletedTodos.bind(this)
  }
...

fetchUserState() {
    let th = this
    console.log(th)
    this.serverRequest = 
      axios.get('http://localhost:3000/todos')
        .then(function(result) {
          console.log(result.data)
          th.state.todos = result.data
        })
  }

}

const todoStore = new TodoStore
dispatcher.register(todoStore.handleActions.bind(todoStore))

export default todoStore

完整文件的要点： https://gist.github.com/WebRuin/efbbf4296c566f6eb58cc6d641bee4ba

控制台日志向我显示 axios 请求已用我想要的数据完成，this 的日志显示 this.state.todos 正在填充，但 Chrome 的反应插件不显示数据，因此应用程序不显示数据。

我做错了什么？

Answer 1

Andy 是对的，除了构造函数，我们应该总是使用setState()，它在设置状态时是异步工作的。

---

来自here：1 和2

---

然而，这对于普通的 React 来说是正确的。在 Flux 中，我们应该忘记 setState 方法，而只使用商店。这是文章中的信息。

我为我的 Flux 导航创建了一张图片，它可能会对你有所帮助。

---

通常您应该通过 axios 加载数据，而不是通过 componentWillMount()，但您可以使用 Flux 操作流。 但是，您仍然可以使用componentWillMount() 来创建操作。

Answer 2

永远不要直接修改状态对象。始终使用setState()。