麻烦通过axios填充状态

Question

我正在尝试使用homespun json API（json-server --watch db.json）来填充flux存储的状态。我从父组件componentWillMount调用商店的函数来使用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 gist 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的react插件未显示数据因此应用程序不显示数据。

我做错了什么？

Answer 1

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

来自here：1和2

但是，对于常见的React来说也是如此。在Flux中，我们应该忘记setState方法并且只使用商店。这是文章中的信息。

我为我的Flux导航创建了一个图像，它可能对您有帮助。

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

Answer 2

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