Estoy tratando de hacer una llamada API en useEffect() y quiero que se llame a useEffect() cada vez que se agreguen nuevos datos en el backend. Hice un botón personalizado (AddUserButton.js) que agrega un nuevo usuario en el backend. Estoy importando este botón en el archivo (ManageUsers.js) donde intento mostrar todos los usuarios. Solo quería hacer un useState para realizar un seguimiento cada vez que se hace clic en un botón Agregar y hacer que useEffect se actualice de acuerdo con él. Por ejemplo:
const [counter, setCounter] = useState(0); ... const handleAdd = () => { setCounter(state => (state+1)); }; ... useEffect(() => { // fetch data here ... }, [counter]); ... return( <Button onClick = {handleAdd}> Add User </Button> );Pero actualmente, debido a que tengo dos archivos .js, no estoy seguro de cómo hacer que mi lógica indicada anteriormente funcione en este caso.
AdministrarUsuarios.js
import AddUserButton from "./AddUserButton"; ... export default function ManageShades() { ... useEffect(() => { axios .get("/api/v1/users") .then(function (response) { // After a successful add, store the returned devices setUsers(response.data); setGetUserFailed(false); }) .catch(function (error) { // After a failed add console.log(error); setGetUserFailed(true); }); console.log("Load User useeffect call") },[]); return ( <div> ... <Grid item xs={1}> <AddUserButton title = "Add User" /> </Grid> ... </div> ); }AddUserButton.js
export default function AddDeviceButton() { ... return ( <div> <Button variant="contained" onClick={handleClickOpen}> Add a device </Button> ... </div> ); }Un enfoque común es pasar una función de devolución de llamada a su componente de botón que actualiza el estado del componente principal.
import { useState, useEffect } from "react"; const AddUserButton = ({ onClick }) => { return <button onClick={onClick} />; }; export default function Test() { const [updateCount, setUpdateCount] = useState(false); const [count, setCount] = useState(0); useEffect(() => { setCount(count++); }, [updateCount]); return ( <div> <AddUserButton onClick={() => { // do something, eg send data to your API // finally, trigger update setUpdateCount(!updateCount); }} /> </div> ); }Entonces, parece que está tratando de permitir que un niño actualice el estado de su padre, una manera fácil de hacerlo es permitir que el padre le devuelva la llamada al niño, que actualizará el estado del padre cuando se le llame.
const parent = ()=>{ const [count, setCount] = useState(0); const increCallback = ()=>{setCount(count + 1)}; return (<div> <child callback={increCallback}/> </div>); } const child = (callback)=>{ return (<button onClick={callback}/>); }Si le dijera al componente ManageUsers que busque desde el back-end justo después de que se active el evento AddUser, es casi seguro que no verá el último usuario en la respuesta.
¿Por qué? Tomará algún tiempo para que el back-end reciba la solicitud del nuevo usuario, un poco más para que se aprueben las reglas de seguridad adecuadas, un poco más para que se formatee, desinfecte y coloque en la base de datos, y un poco más más tiempo para que esa actualización esté disponible para que la API la extraiga.
¿Qué podemos hacer? Si administra los usuarios en el estado, lo que parece que hace, según setUsers(response.data) , puede agregar el nuevo usuario directamente a la variable de estado, que luego hará que el usuario aparezca inmediatamente en la interfaz de usuario. Luego, los nuevos datos de usuario se agregan de forma asíncrona al back-end en segundo plano.
¿Como podemos hacerlo? Es un flujo realmente simple que se parece a esto (basado aproximadamente en la estructura de componentes que tiene ahora)
function ManageUsers() { const [users, setUsers] = useState([]); useEffect(() => { fetch('https://api.com') .then(res => res.json()) .then(res => setUsers(res)); .catch(err => console.error(err)); }, [setUsers]); const handleAdd = ({ name, phone, dob }) => { const newUser = { name, phone, dob }; setUsers([...users, newUser]); }; return ( <div> <UserList data={users} /> <AddUser add={handleAdd} /> </div> ); } // ... function AddUser({ add }) { const [userForm, setUserForm] = useState({ name: "", phone: "", dob: "" }); return ( // controlled form fields <button onClick={() => add(userForm)}>Submit</button> ); } // ... function UserList({ data }) { return ( <> {data.map(user => <p>{user.name></p> } </> ); } Una vez que el usuario agrega un nuevo usuario con el botón "Enviar", pasa al nuevo usuario a la función "agregar" que se ha transmitido como accesorio. Luego, el usuario se agrega a la matriz de users del componente ManageUsers, y se completa instantáneamente con los datos de usuario más recientes en el componente UserList. Si esperamos a que llegue una nueva solicitud de recuperación, esto agregará un retraso y es probable que el usuario más nuevo que acabamos de agregar no regrese con la respuesta.