使用 axios post 请求在 reactJs 中的哪里插入我的待办事项？

Question

在哪里写 axios post 请求将待办事项插入 database.If 我在 componentDidUpdate() 中写 axios post 请求每当点击 todo_completed 状态的复选框时它会插入数据库。重复记录保持真假。我不明白在 todoApp.jsx 中在哪里调用 post 请求这是我的代码 todoapp.jsx

    var React = require('react');
    var TodoSearch = require('TodoSearch');
    var AddTodo = require('AddTodo');
    var TodoList = require('TodoList');
    var axios= require('axios');
    var TodoApp=React.createClass({
        getInitialState:function(){
            return{
                todo_completed:false,
                strSearchText:'',
                todos:[]

            };
        },
        componentDidMount:function(){
            var that=this;
            axios.post('/displaytodo').then(function (response){
                console.log("display");
                var todos=response.data;
                console.log(todos);
                that.setState({
                    todos:response.data
                });
            }).catch(function (error){
                console.log(error);
            });

        },
        componentDidUpdate:function(){
            var todo_text="";
            var todo_completed="";
            this.state.todos.forEach(function(todo){
                todo_text= todo.todo_text;
                todo_completed=todo.todo_completed;
            });
//insert todo in database
            axios.post('/addtodo',{
                todo_text:todo_text,
                todo_completed:todo_completed

            }).then(function (response) {

                console.log("data");
            }).catch(function (error) {
                console.log(error);
            });
            },
        handleAddTodo:function(todo_text){
            alert("new todo "+todo_text);
                    //insert query needed to add todo
             this.setState({
                todos:[
                ...this.state.todos,
                {
                    todo_text:todo_text,
                    todo_completed:false    
                }
                ]
             });
                },
        handleToggle:function(todo_id){
            var updatedTodos=this.state.todos.map((todo)=>{
                if(todo.todo_id===todo_id){
                    todo.todo_completed=!todo.todo_completed;
                }
                return todo;
            });
            //update query required for completed status
            this.setState({
                todos:updatedTodos
            })
            //alert(id);
        },
        handleSearch:function(boolShowCompleted,strSearchText){
            this.setState({
                boolShowCompleted:boolShowCompleted,
                strSearchText:strSearchText.toLowerCase()

            });
        },
        render:function(){
            var urlValue = this.props.params.sessionValue;
            console.log(urlValue);
            var {todos}=this.state;
            return(
                <div>
                    {urlValue}
                    <TodoSearch onSearch={this.handleSearch}/>
                    <TodoList todos={todos} onToggle={this.handleToggle}/>
                    <AddTodo onAddTodo={this.handleAddTodo}/>
                </div>
                )
        }
    });
    module.exports=TodoApp;

AddTodo.jsx

 var AddTodo = React.createClass({
             handleSubmit: function(e) {
                 e.preventDefault();
                 var strTodoText = this.refs.strTodoText.value;
                 if (strTodoText.length > 0) {
                     this.refs.strTodoText.value = '';
                     this.props.onAddTodo(strTodoText);
                 } else {
                     this.refs.strTodoText.focus();
                 }
             },
             render: function() {

                     return ( < div >
                                 < form onSubmit = { this.handleSubmit } > 

                                 < input type = "text"  ref = "strTodoText" / > 
                                 < button className = "button" > Add Todo < /button> 
                                 </form > Add todo..... 
                              < /div>
                            )
             } 
 });

Answer 1

你需要在两个地方添加一个axios post请求，

在 handleAddTodo 函数中，添加新待办事项时会调用该函数。对于此 post 请求，您需要在 table
在 handleToggle 函数中，当您切换待办事项状态时会调用该函数，对于此 post 请求，您需要更新您的 table

使用 axios post 请求在 reactJs 中的哪里插入我的待办事项？

where to insert my todo in reactJs using axios post request?

reactjs

axios