Question

我一直在努力了解这个简单的待办事项列表前端React应用程序出了什么问题，该应用程序应与Express API进行交互。

我的React代码是：

Age      Index 1     Index 2     Index 3     Index 4
18-30    20.000000  0.000000    0.000000    5.000000    
31-40    27.807487  6.746195    2.694364    1.069519    
41-50    45.499022  6.849315    1.663405    3.228963    
51-60    41.176471  0.000000    0.000000    11.764706

这些调用确实会更新API，如果我手动刷新页面，React应用将获取来自API的新数据。但是，单击按钮时，它不会自行重新渲染。

例如，我单击添加按钮。它发送一个OPTIONS，我返回200的代码，一个POST也返回200的代码，有时还返回200的GET。执行最后一个GET调用时没有模式，也没有模式单击后重新渲染。要获取最新数据，我总是必须刷新。

不知道该怎么做，已经被困了好几天了。

Answer 1

我认为按钮操作没有状态更新

尝试为与componentDidMount相同的操作添加状态更新

例如：

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中捕获的新待办事项

并执行删除操作

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

实际上，您的代码中没有任何状态更新。从API提取数据时，必须使用“ setState”。我建议学习箭头功能和Hooks，并使用诸如AXIOS之类的方法来管理API调用。

API调用setState后，React不重新渲染

2 个答案: