如何等待ajax響應，然後定義對象

Question

我正在做一個簡單的待辦事項應用程序對應用程序工作正常時，我將數據存儲在預定義的對象。 但現在我是從用ajax的鏈接（休息）讓我的數據，讓問題與此， 路徑 - 頁/ todo.js

import React from "react"; 
    import Todo from "../components/Todo"; 
    import * as TodoActions from "../actions/TodoActions.js"; 
    import TodoStore from "../stores/TodoStore"; 

export default class Settings extends React.Component { 
    constructor(){ 
    super(); 
    this.getTodos=this.getTodos.bind(this); 
    this.state={ 
     todos: TodoStore.getAll(), 
    }; 
    console.log("STATE",this.state.todos); 
    } 
    componentDidMount(){ 
    TodoStore.on("load",this.getTodos); 
    } 

getTodos() 
{ 
    this.setState({ 
    todos:TodoStore.getAll(), 
    }); 
} 
    reloadTodos(){ 
    TodoActions.reloadTodos(); 
    } 
    render() { 
    const {todos}=this.state; 
    const TodoComponents=todos.map((todo)=>{ 
     return <Todo key={todo.id} {...todo}/>; 
    }); 
     return (
     <div> 
     <button onClick={this.reloadTodos.bind(this)}>Reload!!</button> 
     <h1>TODO.net</h1> 
     <ul>{TodoComponents}</ul> 
     </div> 
     ) 
    } 
} 

路徑-stores /藤

import {EventEmitter} from "events"; 
import * as $ from "jquery"; 

import dispatcher from "../Dispatcher"; 
class TodoStore extends EventEmitter 
{ 
    constructor(){ 
    super() 
    this.todos=[]; 
    } 
    createTodo(text) 
    { const id=Date.now(); 
    this.todos.push({ 
     id, 
     text, 
     complete:false 
    }); 
    this.emit("change"); 
    } 
    getAll(){ 
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest.learncode.academy/api/chitranks/todo', 
      success: function(data) { 
      console.log("here",data); 
      this.todos=data; 
      window.todos=this.todos; 
      }.bind(this), 
      error: function() { 
       alert('error GET connecting to REST'); 
      }.bind(this) 
     }); 

    return this.todos; 
    } 
    handleActions(action) { 
     switch(action.type){ 
     case "CREATE_TODO":{ 
      this.createTodo(action.text); 
     } 
     case "RECEIVED_TODOS":{ 
      this.todos=action.todos; 
      this.emit("change"); 
     } 
     } 

    } 
} 
const todoStore=new TodoStore; 
dispatcher.register(todoStore.handleActions.bind(todoStore)); 
window.dispatcher=dispatcher; 
export default todoStore; 

時我在控制檯待辦事項I型可以看到的數據，但它不呈現（顯示未定義）中的頁面

並且還/ todo.js文件的對象是未定義

Answer 1

由於AJAX是asynchronous您不能從response返回實際數據。請使用callbacks從響應中獲取數據。

這裏是更新的代碼

import React from "react"; 
import Todo from "../components/Todo"; 
import * as TodoActions from "../actions/TodoActions.js"; 
import TodoStore from "../stores/TodoStore"; 

export default class Settings extends React.Component { 
    constructor(){ 
    super(); 
    this.getTodos=this.getTodos.bind(this); 
    this.state={ 
     todos: [] 
    }; 
    console.log("STATE",this.state.todos); 
    } 
    componentWillMount(){ 
    this.getTodos();//directly hydrating store with todos. 
    } 
    getTodos() 
    { 
    var _this = this; //context saved to another variable to use this in anonymous function as callback 
    TodoStore.getAll(function(todos){ 
     _this.setState({ 
     todos: todos, 
     }, function(){ console.log("updated TODOS::", _this.state.todos)}); 
    }); 
    } 
    reloadTodos(){ 
    TodoActions.reloadTodos(); 
    } 
    render() { 
    const {todos}=this.state; 
    const TodoComponents=todos.map((todo)=>{ 
     return <Todo key={todo.id} {...todo}/>; 
    }); 
    return (
     <div> 
     <button onClick={this.reloadTodos.bind(this)}>Reload!!</button> 
     <h1>TODO.net</h1> 
     <ul>{TodoComponents}</ul> 
     </div> 
    ) 
    } 
} 

和店鋪

import {EventEmitter} from "events"; 
import * as $ from "jquery"; 

import dispatcher from "../Dispatcher"; 
class TodoStore extends EventEmitter{ 
    constructor(){ 
    super() 
    this.todos=[]; 
    } 
    createTodo(text){ 
    const id=Date.now(); 
     this.todos.push({ 
     id, 
     text, 
     complete:false 
     }); 
     this.emit("change"); 
    } 
    getAll(callback){ //call this on componentWillMount() (required) 
     $.ajax({ 
      type: 'GET', 
      url: 'http://rest.learncode.academy/api/chitranks/todo', 
      success: function(data) { 
      console.log("here",data); 
      this.todos=data; //store gets hydrated with todos 
      if(typeof callback == "function"){ 
     callback(data) //giving data to callback 
      } 
      window.todos=this.todos; //not necessary other than for checking in console 
      }.bind(this), 
      error: function() { 
       alert('error GET connecting to REST'); 
      }.bind(this) 
     }); 
    return this.todos; //not the proper palce to retutn 
    } 
    handleActions(action) { 
     switch(action.type){ 
     case "CREATE_TODO":{ 
      this.createTodo(action.text); 
     } 
     case "RECEIVED_TODOS":{ 
      this.todos=action.todos; 
      this.emit("change"); 
     } 
     } 

    } 
} 
const todoStore=new TodoStore; 
dispatcher.register(todoStore.handleActions.bind(todoStore)); 
window.dispatcher=dispatcher; 
export default todoStore;