[英]React functional component, how to re-render after data is removed
Trying to remove an item from the database from a list view with a button. 尝试使用按钮从列表视图中从数据库中删除项目。
The data gets removed on click, but the component isnt removed from the page. 单击可删除数据,但不会从页面中删除组件。
How should I go about making it re-render after its removed? 移除后如何重新渲染?
I an not using redux for this 我没有为此使用redux
const EmailItem = ({email}) => (
<div>
<h3>{email}</h3>
<button
onClick={(e) => {
e.preventDefault()
axios.delete("/api/emails/delete/", {
data: {email: email}
})
}
}
>
Remove
</button>
</div>
)
export default (EmailItem) 导出默认值(EmailItem)
Pass a handler/callback in props as onDelete from parent. 从父级传递道具中的处理程序/回调作为onDelete。 Calling onDelete inside axios success would call the callback body defined in parent... where essentially you would be having conditional state to show or hide this component.
在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}/>
}
}
and then change your existing EmailItem to: 然后将您现有的EmailItem更改为:
const EmailItem = ({email, onDelete}) => (
and handler to: 和处理程序可以:
onClick={(e) => { e.preventDefault();
axios.delete("/api/emails/delete/", { data: {email: email} }).then(){
onDelete()
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.