リフレッシュせずにAPIリクエストで状態配列を更新するにはどうすればいいですか？

Question

私はGETとPOSTのデータをAPIに送ることができる簡単なReact Appを持っています。それを簡単なTodoアプリと呼んでください。私はデータを "反応する"方法で処理する最善の方法を理解しようとしています。

私は、AJAX呼び出しを置くのに最適な場所は、しかし、私のアプリでは、私はcomponentWillMountまたはcomponentDidMountを使用している場合、それはシームレスにデータを再ロードすることはできません、componentWillMountまたはcomponentDidMountのいずれかの内部にあることをthis SO postで読みました。新しい追加情報が表示されるようにページを更新する必要があります。私は私が持っているかを説明してみましょう：Client.getTodosとClient.postTodo一方

... 
    constructor() { 
    super(); 
    this.state = { 
     todos: [], 
     todo: 'do this!' 
    }; 
    ... 
    getTodos(){ 
    Client.getTodos((todos) => { 
     this.setState({todos}) 
    }); 
    }; 
    postTodo(e){ 
    let todo = this.state.todo; 
    Client.postTodo(todo, (todo) => { 
     this.setState({todos: this.state.todos.concat([todo])}) 
    }); 
    }; 
    componentDidMount(){this.getTodos()}; //componentWillMount() works gives me similar effect 

    render(){ 
    return (
     <div> 
     <p>Hello from todos!</p> 
     <ul> 
      {this.state.todos.map((t, index) => 
      <li key={index}>{t.description}</li> 
     )} 
     </ul> 
     <AddTodo todo={this.state.todo} 
      handleChange={this.handleChange} 
      postTodo={this.postTodo} 
     /> 
     </div> 
    ... 
//inside AddTodo.js 
    ... 
    <input type="text" placeholder={this.props.todo} onChange={this.props.handleChange} /> 
    <input type="button" value='submit' onClick={this.props.postTodo} /> 

は以下のとおりです。

function getTodos(cb) { 
    return fetch(`api/todos`, { 
     headers : { 
     'Content-Type': 'application/json', 
     'Accept': 'application/json' 
     }}) 
    .then((response) => response.json()) 
    .then(cb); 
}; 

function postTodo(todo, cb){ 
    return fetch(`api/todos`, { 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     description: todo 
    }) 
    }).then(cb); 
}; 

どちらのクライアントの方法が働きます。私はを取り除くためにしようとしています

一つの挙動は、そのようである - のは、これが私の現在のドスあるとしましょう：私は新しいtodoを入力すると

- Todo1 
- Todo2 
- Todo3 

、Todo4言う、それは意志、私は

を送信]を押した直後に

- Todo1 
- Todo2 
- Todo3 
- //shows a new list, but it is empty 

Todo4が一覧に表示されるようにページを更新する必要があります。

... 
    render(){ 
    this.getTodos(); 
    return (
     <div> 
     ... 

バックSO投稿earlierを参照すると、それは正確にcomponentwillmountまたはcomponentdidmount内部AJAX要求を行っていません：私はページを更新することなく、Todo4を追加することを可能にする一つの方法は、持っていることです。

これは物事を行う「反応する」ような気がしません。 APIリクエストを処理しているときに、私のtodosリストを（ページをリロードせずに）リアルタイムでどのように更新できますか？

Answer 1

はあなたpostTodo

に

function postTodo(todo, cb){ 
    return fetch(`api/todos`, { 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     description: todo 
    }) 
    }).then((response) => response.json()) 
    .then(json => cb(json)); 
}; 

を変更してみてください理想的には、ステータスコードが対応しているかどうか確認し、それが成功した場合にのみ更新する必要があります。

function postTodo(todo, successCb, errorCb){ 
    return fetch(`api/todos`, { 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     description: todo 
    }) 
    }).then(response => { 
    let json = response.json(); 
    // successCode = 201 for create resource 
    if (response.status != successCode) { 
     json.then(error => { 
      errorCb(error); 
     }) 
    } else { 
     json.then(json => { 
      successCb(json); 
     }) 
    } 
});