Question

尝试使用按钮从列表视图中从数据库中删除项目。

单击时会删除数据，但不会从页面中删除该组件。

在移除后如何重新渲染？

我不为此使用redux

const EmailItem = ({email}) => (

  <div>
    <h3>{email}</h3>
    <button
      onClick={(e) => {
      e.preventDefault()
      axios.delete("/api/emails/delete/", {
        data: {email: email}
      })
      }
    }
    >
      Remove
  </button>
  </div>
)

导出默认（EmailItem）

Answer 1

通过父项的onDelete传递道具中的处理程序/回调。在axios中成功调用onDelete会调用在父级中定义的回调主体...实际上，您将具有条件状态来显示或隐藏此组件。

Parent extends React.component {
constructor {
    this.state={
      showEmail: true
    }
}
hideEmail =()=>this.setState({showEmail:false})
render(){
this.state.showEmail && {
<EmilItem onDelete={hideEmail} email = {your email}/>
}
}

，然后将现有的EmailItem更改为：

const EmailItem = ({email, onDelete}) => (

和处理程序：

onClick={(e) => { e.preventDefault();   

axios.delete("/api/emails/delete/",    { data: {email: email} }).then(){
onDelete()
} }

React功能组件，删除数据后如何重新呈现

1 个答案: