Estoy desarrollando usando reaccionar. Está en el proceso de obtener la información contenida en la base de datos y mostrarla en la página web a través del método del mapa. Si elimina una pieza de información utilizando onclick o el método onClose proporcionado por antd, la información también se elimina de la base de datos. en la base de datos, la función funcionó correctamente. pero se elimina la información en la parte inferior, no la información eliminada en la página web. Si actualizo el sitio web, se muestra normalmente, pero no quiero usar la función de recarga de la ventana. Me pregunto por qué sucede esto y cuál es la solución. ¡gracias!

AlertPage

 import React, { useState } from "react"; import useSWR from "swr"; import axios from "axios"; import AlertComponent from "./Sections/AlertComponent"; const fetcher = async (url) => await axios.get(url).then((response) => JSON.parse(response.data.alerts)); function AlertPage() { const { data = [], error } = useSWR("/api/streaming/getAlerts", fetcher, { refreshInterval: 1000, }); const onClose = (data) => { axios.post(`/api/streaming/removeAlerts/${data._id.$oid}`).then(() => { console.log(`${data._id.$oid} deleted`); }); }; const renderAlerts = data.map((alert, index) => { return ( <div key={index}> <AlertComponent alert={alert} index={index} onClose={onClose} /> </div> ); }); if (error) return <div>failed to load</div>; if (data === []) return <div>loading...</div>; return <div>{renderAlerts}</div>; } export default AlertPage;

AlertComponent

 import React, { useState } from "react"; import { Alert } from "antd"; import Marquee from "react-fast-marquee"; function AlertComponent(props) { const [alert, setalert] = useState(props.alert); const [index, setindex] = useState(props.index); return ( <div className="alert" key={index} style={{ display: "flex" }} onClick={() => { props.onClose(alert); }} > <Alert message={`${alert.data.timestamp.$date.substr(0, 19)}`} description={ <Marquee pauseOnHover speed={40} gradient={false}> {`<${alert.data.location}> <${alert.data.name}> <${alert.data.contents}> detected`} </Marquee> } banner /> </div> ); } export default AlertComponent;