Question

我是后端的新手，但在发出提取请求后，我必须重新加载页面以查看任何更改。调用函数后，数据库将立即更新，但组件不会重新呈现。我知道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

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

当前，您只在后端执行操作，而前端不知道该操作发生在后端。最佳方法是在对DB执行操作后将完整数据（列表或对象）传递回前端，然后将值链接到状态，如果数据量很大，则将成功消息（200个）从后端发送回前端，如果成功，则更改前端的值（列表），将值（列表）链接到前端的状态以重新呈现组件。

Answer 2

您必须更新状态，一旦更新状态，组件将重新呈现，并显示最新更改。在这里，我假设您在状态中设置的“待办事项”是一个数组，然后在删除和添加时对其进行更新。即：

  // onClick for submit button
    handleSubmit = (e) => {
        e.preventDefault();
        const data = this.state;
        const currentTodos = [...this.state.todos]
        fetch("/api/todos", {
            method: "post",
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        }).then(()=>{
           currentTodos.push(data);
           this.setState({todos:currentTodos})
        })
    };
 // similarly for delete you can do

 // onClick for delete button
     handleDelete = (e) => {
        e.preventDefault();
        let uniqueId = e.target.getAttribute("id")
        let currentTodos = [...this.state.todos];
        fetch(`/api/todos/${uniqueId}`, {
            method: "delete",
            headers: { 'Content-Type': 'application/json' }
        }).then(()=>{
         let updatedTodos = currentTodos.filter(todo=>todo._id !==uniqueId);
         this.setState({todos:updatedTodos})
      })
     };

Answer 3

您可能没有更改状态“待办事项”，这就是为什么它不呈现的原因。您可以在每次更改（删除，更新，添加...）后获取待办事项，也可以自行更改状态。

方法1：

componentDidMount() {
    this.getTodos();
}

getTodos = () => {
    //fetch todos, setState
}

handleSubmit = () => {
    fetch(...).then(this.getTodos);
}

handleDelete = () => {
    fetch(...).then(this.getTodos);
}

方法2：

componentDidMount() {
    this.getTodos();
}

getTodos = () => {
    //fetch todos, setState
}

handleSubmit = () => {
    fetch(...);
    let todos = this.state.todos;
    todos.push(newTodo);
    this.setState({todos});
}

handleDelete = () => {
    fetch(...);
    let todos = this.state.todos;
    //remove todo from todos
    this.setState({todos});
}

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

3 个答案: