Как обновить 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 после удаления элемента?


Ответы (0 шт):