Javascript 如何在axios中实现删除方法并作出反应？

我无法实现删除按钮。 我有api端点“DELETE/../{id}”。 请访问ApiService.js：

deleteById(id) {
        return axios.delete(`${ACCOUNT_API_BASE_URL}/${id}`)
    }

这是我的班级：

class Account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            item: {
                id: props.match.params.id,
                name: '',
                email: '',
                password: '',
                link: ''
            }
        };
        this.deleteById = this.deleteById.bind(this);
    }

    componentDidMount() {

        // eslint-disable-next-line
        if (this.state.item.id === -1) {
            return -1
        }

        ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: {
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))
    }


    deleteById(id) {
        ApiService.deleteById(id)
            .then(res => console.log(res.data))
    }

    render() {
        return (
            <div>
                <h3>{this.state.item.name}</h3>
                <ul>
                    {this.state.item.id}
                    <li className={c.itemEmail}>Email: {this.state.item.email}</li>
                    <li>Password: {this.state.item.password}</li>
                    <li>Link: {this.state.item.link}</li>
                </ul>
                <button onClick={this.deleteById(this.state.item.id)}>Delete</button>

            </div>
        )
    }
}

类帐户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：{
id:props.match.params.id，
名称：“”，
电子邮件：“”，
密码：“”，
链接：“”
}
};
this.deleteById=this.deleteById.bind（this）；
}
componentDidMount（）{
//eslint禁用下一行
if（this.state.item.id==-1）{
返回-1
}
ApiService.fetchAccountById（this.state.item.id）
.then（response=>this.setState({
项目：{
名称：response.data.name，
电子邮件：response.data.email，
密码：response.data.password，
链接：response.data.link
}
}))
}
deleteById（id）{
ApiService.deleteById（id）
.then（res=>console.log（res.data））
}
render（）{
返回(
{this.state.item.name}

{this.state.item.id}
电子邮件：{this.state.item.Email}
密码：{this.state.item.Password}
链接：{this.state.item.Link}

删除
)
}
}

它在请求页面（get方法）后删除数据，但不是通过单击“删除”按钮

如果我将

this.deleteById

设置为

this.deleteById（this.state.item.id）}>Delete
首先，您要从componentDidMount中的项目中删除
id
属性：

ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: { // now item doesn't have id anymore
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))

因此，保持您的
id
如下：

ApiService.fetchAccountById(this.state.item.id)
                .then(response => this.setState({
                    item: {
                        id: this.state.item.id,
                        name: response.data.name,
                        email: response.data.email,
                        password: response.data.password,
                        link: response.data.link
                    }
                }))

其次，您正在执行函数，而不是将函数传递给onClick，请将onClick值更改为：

onClick={() => {this.deleteById(this.state.item.id)}}

不，它不起作用，说的是/api/../undefined而不是/api/../23您还正在从componentDidMount中的项中删除
id
，这就是
this.state.item.id
未定义的原因，我修改了答案，请检查。我如何更新状态（如果是关于状态），因为在删除按钮后我重定向到其他URL，在那里，我仍然可以看到旧数据，只有在刷新页面后它才会改变？@andrew17您的
是否在
标签中？如果是这样的话，按钮的作用可能类似于提交按钮并触发表单。您可能希望将
的类型设置为
type=“button”
，这样它就不会像提交一样。id处于状态和道具有一点：如果发送给道具的id发生了更改，因为大多数时候您都依赖处于状态的id，那么您可能会在这里遇到错误。最好总是使用道具中的ID，而不是将其存储在状态中，除非您希望该ID发生更改，但是您可能还需要在更高级别上更改ID。此外，关键可能应该是ID。如果是这种情况，那么如果ID更改，将创建组件的新实例（这会意外修复错误）。
onClick={() => {this.deleteById(this.state.item.id)}}