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

Question

我刚开始在后端使用react和绑定(bind)，但在发出提取请求后，我必须重新加载页面才能看到任何变化。一旦函数被调用，数据库就会更新，但组件不会重新渲染。我知道 setState 异步工作，所以我尝试在 setState 的回调中调用我的函数，但那没有用。

这发生在我的 handleSubmit 和 handleDelete 函数上。我最初的 get 请求在我的 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 条就足够了)，如果成功则更改前端的值(列表)，将值(列表)链接到前端的状态以重新呈现组件。