无法通过 axios 填充状态

Question

我正在尝试使用朴素的 json API (json-server --watch db.json) 来填充通量存储的状态。我正在从父组件的 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要点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 正在填充，但 [=38= 的反应插件] 不显示数据，因此应用程序不显示数据。

我做错了什么？

Answer 1

切勿直接修改状态对象。始终使用 setState().

Answer 2

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

来自here: 1 and 2

不过，对于常见的 React 来说确实如此。在 Flux 中，我们应该忘记 setState 方法，只使用商店。这是文章中的消息。

我为我的 Flux 导航制作了一张图片，它可能对你有帮助。

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

无法通过 axios 填充状态

Trouble populating state via axios

reactjs

flux

axios