Hola, estoy usando axios para agregar un nuevo registro y estoy tratando de actualizar la tabla después de cualquier operación CRUD en la base de datos.
El componente principal tiene componentes MailList y AddMail. El componente AddMail tiene un control de formulario que llama a axios POST para agregar un nuevo registro. ¿Cómo actualizo la tabla en MailList usando ganchos de reacción?
export default function MailList() { const [mailList, setMailList] = useState([]); useEffect(() => { axios.get("http://localhost:5243/api/Mail") .then(res => { setMailList(res.data) console.log(res.data) }) .catch(err => console.log(err)) }, []); return( <React.Fragment> <Title>Recent Mail Scanned</Title> <Table> <TableHead> <TableRow> <TableCell>ID</TableCell> <TableCell>Tracking Number</TableCell> <TableCell>Date Scanned</TableCell> </TableRow> </TableHead> <TableBody> {mailList.map((m) => ( <TableRow key={m.mailId}> <TableCell>{m.mailId}</TableCell> <TableCell>{m.trackingNo}</TableCell> <TableCell>{m.dateScanned}</TableCell> </TableRow> ))} </TableBody> </Table> </React.Fragment> ); }AgregarCorreo
const initialValues = { trackingNumber: '', dateCreated: new Date(), } const [values, setValues] = useState(initialValues); const handleInputChange = e => { const { name, value } = e.target setValues({ ...values, [name]: value }) } let item = { trackingNo: values.trackingNumber, dateCreated: values.dateCreated } function addMail() { axios.post("http://localhost:5243/api/Mail", item ) } ... <Button onClick={addMail}>Save Mail</Button>Desea agregar algo así en useEffect.
useEffect(()=>{ 'your code' },[mailList])Debes darle a tu useEffect una dependencia. Luego, si hay algún cambio en la lista de correo, entonces se debe cambiar la página.
const [mailList, setMailList] = useState([]); useEffect(() => { axios.get("http://localhost:5243/api/Mail") .then(res => { setMailList(res.data) console.log(res.data) }) .catch(err => console.log(err)) }, [mailList]);