Как обновить List после удаления элемента?
Я получаю список вечеринок со своего back-end'а(используя токен):
const [party_list, setUsrParty] = useState([]);
useEffect(() => {
let myToken = localStorage.getItem('myToken')
fetch("/party_by_user", {
method: "GET",
headers: {
"Content-Type": "application/json",
"x-access-token": myToken.replace(/['"]+/g, '') // убираем лишние кавычки
}
}).then(response =>
response.json().then(data => {
setUsrParty(data.party_list);
})
);
}, []);
Затем в передаю полученные данные в компонент.(Приходится применять замыкание для передачи параметра, так как я использую React Routes).Использую способ из этого вопроса:
const WrapperParty = function (props) {
return (
//<PartiesOfUser {...props} onDelParty={party => setUsrParty(currentParties => [...currentParties, party])} party_list={party_list} />
<PartiesOfUser {...props} party_list={party_list} />
);
}
Внутри самого компонента PartiesOfUser я использую List, чтобы выводить список вечеринок:
export const PartiesOfUser = ({ party_list /*, onDelParty*/ }) => {
return (
<Container style={{ marginTop: 40 }}>
<List>
{party_list.map(usrparty => {
return (
<List.Item key={usrparty.title}>
<Header>{usrparty.title}</Header>
{/* <Rating rating={usrparty.rating} maxRating={5} disabled /> */}
<button
onClick={() => {
(async () => {
let myToken = localStorage.getItem('myToken')
const response = await fetch("/del_party/" + usrparty.id, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"x-access-token": myToken.replace(/['"]+/g, '') // убираем лишние кавычки
}
});
console.log("HERE1")
if (response.ok) {
console.log("response worked -DELETED!");
//onDelParty(usrparty)
window.location.reload();
}
else {
console.log("ERRORR");
}
})()
}}>Delete
</button>
<button>Change</button> // пока не реализовал
</List.Item>
);
})}
</List>
</Container>
);
}
export default PartiesOfUser;
На бэк-энде выбранный элемент удаляется, но визуально список не обновляется(элемент остаётся в списке). Я сделал полумеру с window.location.reload(); но ,наверное, есть более лучший способ удалять из списка удаленный элемент?
Поэтому у меня возникает вопрос: как обновить List после удаления элемента?