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

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中定义的回调主体...实际上，您将具有条件状态来显示或隐藏此组件。

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()
} }