Tengo un pequeño problema. Tengo esta obtención de datos en un componente que funciona perfectamente:
const [item, setItem] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); fetch("https://api/products") .then((response) => response.json()) .then((data) => setItem(data)) .finally(() => setLoading(false)); }, []);Luego tengo este POST en un componente diferente:
const handleSubmit = async (e) => { e.preventDefault(); try { await fetch("https://api/products", { method: "POST", headers: { admin: "true", "Content-Type": "application/json" }, body: JSON.stringify(body), }); } catch (error) { console.log("error"); } };¿Cómo puedo obtener los nuevos datos del primer componente después de usar POST sin recargar la página web?
Debe poder agregar esos nuevos datos, body dentro de la matriz de item , lo que significa que debe llamar a este setItem(prev => [...prev, body]) en su try-catch , algo así como:
const handleSubmit = async (e) => { e.preventDefault(); try { await fetch("https://api/products", { method: "POST", headers: { admin: "true", "Content-Type": "application/json" }, body: JSON.stringify(body), }); setItem(prev => [...prev, body]); // here you add the new data } catch (error) { console.log("error"); } }; Ahora, ¿cómo accedería a esta función setItem ? Bueno, si el componente que realiza la solicitud POST es un elemento secundario del componente donde tiene esta línea const [item, setItem] = useState([]) , podría pasar setItem como props .
Si no es el caso, mueve este const [item, setItem] = useState([]) dentro de un componente que es padre de todos esos componentes y transmite lo que necesita como props o usa una solución de administración de estado como la context API .
Debe volver a llamar a la función cuando la respuesta sea verdadera. Me refiero a su función al obtener datos.