Функциональный компонент React, как выполнить повторный рендеринг после удаления данных
Попытка удалить элемент из базы данных из списка с помощью кнопки.
Данные удаляются при нажатии, но компонент не удаляется со страницы.
Как мне сделать повторный рендеринг после его удаления?
Я не использую сокращение для этого
const EmailItem = ({email}) => (
<div>
<h3>{email}</h3>
<button
onClick = {(e) => {
e.preventDefault()
axios.delete("/api/emails/delete/", {
data: {email: email}
})
}
}
>
Remove
</button>
</div>
)
экспорт по умолчанию (EmailItem)
Ответы 1
Передайте обработчик / обратный вызов в реквизитах как onDelete от родителя. Вызов onDelete внутри axios success вызовет тело обратного вызова, определенное в 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()
} }
Да, в этом случае компонент EmailItem не управляет состоянием, отвечающим за обновление рендеринга на экране. Таким образом, вы должны передать некоторый параметр функции, чтобы вызвать обратный вызов по нажатию кнопки и удалить содержимое электронной почты. Хороший пример!
При изменении состояния родительского компонента не будут скрыты все компоненты EmailItem?
Я должно быть делаю что-то не так, я не могу заставить это работать.
Когда я добавляю обещание, оно выдает ошибку, когда я удаляю обещание, оно меняет состояние на false и скрывает все элементы электронной почты.
@vijay есть идеи?
@sierra, не могли бы вы предоставить какой-либо образец кода, где я могу увидеть, как он работает, и помочь вам решить проблему.
это похоже на проблему для картины потока.