如何在获取请求和状态更改后重新渲染组件？

Question

我是在后端做出反应和绑定的新手，但在发出获取请求后，我必须重新加载页面才能看到任何更改。一旦调用函数，数据库就会更新，但组件不会重新渲染。我知道 setState 是异步工作的，所以我尝试在 setState 的回调中调用我的函数，但这不起作用。

这发生在 myhandleSubmit和handleDelete函数上。我的初始获取请求位于我的 componentDidMount 中，因此我将其包含在内，以防它有帮助。

我在网站上找不到我需要的答案，也许推荐已经消失了，但我在这里，哈哈。提前致谢。

     componentDidMount() {
          // todos is the data we get back
          // setting the state to newly aquired data
          fetch("/api/todos")`enter code here`
               .then(res => res.json())
               .then(todos => this.setState({ todos }, () => 
               console.log("Todos fetched...", todos)))
               .catch(err => console.log(err))
    
      }
    
    
    // onClick for submit button
        handleSubmit = (e) => {
            e.preventDefault();
            const data = this.state;
            fetch("/api/todos", {
                method: "post",
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            })
        };
    
    
    // onClick for delete button
         handleDelete = (e) => {
            e.preventDefault();
            let uniqueId = e.target.getAttribute("id")
            fetch(`/api/todos/${uniqueId}`, {
                method: "delete",
                headers: { 'Content-Type': 'application/json' }
            })
         };
    
    // Some of the JSX if needed
         <DeleteBtn
             id={todo._id}
             onClick={this.handleDelete}
         >X</DeleteBtn>
    
    <Form onSubmit={this.handleSubmit} id="myForm"></Form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在寻找的结果是，一旦添加待办事项，它就会立即呈现在我的列表上，而不是仅在页面重新加载时呈现。

Answer 1

从请求中的后端返回详细信息，使用该值来更新状态，

目前你只是在后端执行操作，前端并不知道它发生在后端。最好的方法是在对数据库执行操作后将完整数据（列表或对象）传递回前端并将值链接到状态，如果数据是批量的，则发送成功消息（200 就足够了）从后端到前端，如果成功更改前端的值（列表），则将值（列表）链接到前端的状态以重新渲染组件。