在 API 調用之后的 setState 時反應不重新渲染

Question

我一直在努力理解這個簡單的待辦事項列表前端 React 應用程序出了什么問題，它應該與快速 API 交互。

我的反應代碼是：

import React, {Component} from 'react';

class App extends Component {

constructor(){
    super();

    this.state = { 
        todos:[],
        currentItem: ''
    };  
    this.handleChange = this.handleChange.bind(this);
    this.handleADDButton = this.handleADDButton.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.updateTodo = this.updateTodo.bind(this);
}

componentDidMount(){
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/list')
    .then(res => res.json())
    .then((todosList) =>
        {this.setState({'todos': todosList});
        });
}

handleChange(event){
    this.setState({currentItem: event.target.value});
}

handleADDButton(event){
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/post', {
        method: 'POST',
        headers:{'Content-type': 'application/json'},
        body: JSON.stringify({title: this.state.currentItem})
    });
}

deleteItem(x){
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/' + x, {
        method: 'DELETE',
        headers:{'Content-type': 'application/json'}
        })
      }

updateTodo(y){
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/' + y, {
        method: 'PUT',
        headers:{'Content-type': 'application/json'},
        body: JSON.stringify({title: this.state.currentItem})
        })
    }

render() {
    return(
        <div>
         <h1> Todo List </h1> 
          <ul>
        {this.state.todos.map((todo) => <li> {todo.title}
                    <button type="button" onClick={() => this.deleteItem(todo.key)} >x</button> 
        <button type="button" onClick={() => this.updateTodo(todo.key)}>update</button> </li>)}
          </ul>
            <input type="text" value={this.state.currentItem} onChange={this.handleChange} />
            <button type="submit" onClick={this.handleADDButton}>ADD</button>

            </div>
        )
 }
}
export default App

這些調用確實更新了 API，如果我手動刷新頁面，React 應用程序會接收來自 API 的新數據。 但是，當單擊按鈕時，它不會自行重新呈現。

比如說我點擊添加按鈕。 它發送一個選項，我返回一個 200 代碼，一個 POST 也返回一個 200，只是有時，一個帶有 200 的 GET。它執行最后一次 GET 調用時沒有模式，也沒有模式在單擊按鈕后重新渲染時。 為了獲得最新的數據，我總是需要刷新。

不知道該怎么做，已經卡了好幾天了。

Answer 1

我認為按鈕操作沒有 state 更新

嘗試為與componentDidMount相同的操作添加 state 更新

例如：

handleADDButton(event){
    event.preventDefault();
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/post', {
        method: 'POST',
        headers:{'Content-type': 'application/json'},
        body: JSON.stringify({title: this.state.currentItem})
    }).then(res => res.json())
    .then((data) => {            
        this.setState((prevState) {
            const todos = [...prevState.todos, data.todo];
            return {
                todos: todos
            }
        })
    });
}

在這種情況下，您必須返回將在data.todo中捕獲的新 todo

---

對於刪除操作

deleteItem(x){
    fetch('http://ec2-x-xx-xx-xxx.eu-west-2.compute.amazonaws.com:3001/' + x, {
        method: 'DELETE',
        headers:{'Content-type': 'application/json'}
    }).then(res => res.json())
    .then((data) => {           
        this.setState((prevState) {
            const newTodos = prevState.todos.filter(t => t.key !== x);
            return {
                todos: newTodos
            };
        })
    });
  }

這些代碼未經測試。

Answer 2

實際上，您的代碼中沒有任何 state 更新。 從 API 獲取數據時，您必須使用“setState”。 我建議學習箭頭 function 和Hooks並使用AXIOS 之類的東西來管理 API 調用。