Traté de agregar Toast de react-bootstrap en mi aplicación y puedo hacer que la funcionalidad funcione con el siguiente código. Sin embargo, me pregunto si es redundante usar useEffect para configurar show by setShow(items.length > 0); ? ¿Sería más fácil hacer algo como const show = items.length > 0; o alguna mejor manera para que me acerque?
example of fetch response { "items": [ { "id": 1, "name": "Apples", "price": "$2" }, { "id": 2, "name": "Peaches", "price": "$5" } ] } import "./styles.css"; import React, { useState, useEffect } from "react"; import { Toast } from "react-bootstrap"; export default function App() { const [error, setError] = useState(null); const [show, setShow] = useState(false); const [items, setItems] = useState([]); useEffect(() => { fetch("https://api.example.com/items") .then((res) => res.json()) .then( (result) => { setItems(result); }, (error) => { setError(error); } ); }, []); useEffect(() => { setShow(items.length > 0); }, [items]); // const show = items.length > 0? maybe? const toggleShowB = () => setShow(!show); return ( <div className="App"> <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide> <Toast.Header /> <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body> </Toast> </div> ); }esta es una buena pregunta
En el montaje, el primer useEffect buscará y llamará a setItems
Este cambio de estado activará una nueva representación y actualizará items
El segundo useEffect se ejecutará ya items son una dependencia y llamarán a setShow .
Este es otro cambio de estado y activará una nueva representación para actualizar el show .
Luego se mostrará su Toast (si items.length > 0 )
En el montaje, el primer useEffect buscará y llamará a setItems
Este cambio de estado activará una nueva representación y actualizará items
Tu Toast se mostrará si show={items.length > 0}
Se ahorra una nueva representación al no usar el segundo useEffect para actualizar una variable de estado de show .
En lugar de usar otro gancho useEffect, puedes simplemente usar:
<Toast onClose={() => setShow(false)} show={items.length > 0 && show} delay={3000} autohide> Puede forzar su cierre cambiando el programa. Esto funciona porque reaccionar lo vuelve a renderizar cada vez que cambia un items .
si no desea cerrarlo a la fuerza, simplemente elimine el && show.
<Toast show={items.length > 0} delay={3000} autohide>