onDelete() 方法执行两次，会出现什么问题？

Question

import React, { Component } from 'react'
import axios from 'axios';

class deleteTodo extends Component {


    onDelete(){
        console.log("delete")
        axios.post('http://localhost:4000/todos/delete/'+this.props.match.params.id)
            .then(res => console.log(res.data));

        this.props.history.push('/');

    }

    render() {
        return (
                <div>
                    {this.onDelete()}

                </div>


        )
    }
}

export default deleteTodo

Answer 1

回答您的问题：render() 因各种原因被多次调用，详情请参阅https://reactjs.org/docs/react-component.html#render。

您可以尝试使用componentDidMount() 进行删除请求，如果它应该在组件安装后立即执行一次。

import React, { Component } from 'react'
import axios from 'axios';

class deleteTodo extends Component {


    componentDidMount(){
        console.log("delete")
        axios.post('http://localhost:4000/todos/delete/'+this.props.match.params.id)
            .then(res => console.log(res.data));

        this.props.history.push('/');

    }

    render() {
        return (
                <div></div>
        )
    }
}

export default deleteTodo

我仍然认为这是一种接近你想要的效果的非常奇怪的方式。