Trouble populating state via axios

Question

Ich versuche eine homespun json API (json-server -watch db.json) zu verwenden, um den Zustand eines Flux-Speichers zu füllen. Ich rufe eine Funktion des Speichers von componentWillMount einer übergeordneten Komponente an, um die Daten mit Axios zu laden.

Ich habe in den folgenden Tutorials Referenz suchen: http://mediatemple.net/blog/tips/loading-and-using-external-data-in-react/ https://www.toptal.com/react/tips-and-practices und andere.

Hier ist die JSON-Daten ist in dem ich ziehen:

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

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

Hier ist ein Auszug aus dem Flux-Shop Ich bin Aufruf:

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 

Gist der vollständigen Datei: https://gist.github.com/WebRuin/efbbf4296c566f6eb58cc6d641bee4ba

Die Konsolenprotokollierung zeigt an, dass die Axiosanforderung mit den gewünschten Daten erfüllt ist und ein Protokoll von this zeigt, dass this.state.todos gerade ausgefüllt wird, aber das Reaktiv-Plugin von Chrome zeigt die Daten nicht an und daher zeigt die App die Daten nicht an.

Was mache ich falsch?

Answer 1

Andy hat Recht, außer dem Konstruktor sollten wir immer setState() verwenden, das beim Setzen des Status asynchron arbeitet.

---

Von here: 1 und 2

---

Doch dies gilt für die gemeinsame Reaktion. Im Flux sollten wir die setState Methode vergessen und nur mit den Läden arbeiten. Dies ist die Nachricht aus dem Artikel.

Ich habe ein Bild für meine Flux-Navigation erstellt, es kann Ihnen helfen.

---

Normalerweise sollten Sie die Daten über axios laden, nicht über den componentWillMount(), aber Sie Flux Aktionen fließen dafür verwenden können. Aber immer noch können Sie componentWillMount() verwenden, um die Aktion zu erstellen.

Answer 2

Ändern Sie das Statusobjekt niemals direkt. Verwenden Sie immer setState().