如何使用API​​请求更新状态数组而不刷新和处理React方式？

Question

我有一个简单的React App，可以将数据GET和POST发送到API。称之为简单的待办事项应用程序。我试图找出处理数据“反应”方式的最佳方法。

我在this SO post中读到，调用ajax调用的最佳位置是在componentWillMount或componentDidMount内，但是在我的应用中，我无法使其无缝重新加载数据我使用componentWillMount或componentDidMount。我必须刷新页面才能看到新添加的内容。让我解释一下我的内容：

  ...
  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} />

Client.getTodos和Client.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);
};

两种客户端方法都有效。

我试图摆脱的一种行为就是这样 - 让我们说这是我目前的待办事项：

- Todo1
- Todo2
- Todo3

当我输入新的todo时，请说Todo4，在我按下提交后

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

我需要刷新页面以查看列表中的Todo4。允许我添加Todo4而无需刷新页面的一种方法是：

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

回到SO帖子earlier，它并不完全在componentwillmount或componentdidmount中执行ajax请求。

这并不像是“反应”的做事方式。如何在处理API请求时以正确的方式实时更新我的​​待办事项列表（无需重新加载页面）？

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);
        })
    }
});