Estoy ingresando marcas de automóviles en un cuadro de entrada, que luego se guardan debajo del cuadro de texto en una lista presionando el botón "Guardar". Mi otro componente "Información" debería establecer un div de texto para mostrar una cadena cuando hay más de 5 elementos en la lista.
Estoy haciendo esto sin clases y necesito usar el componente Información para hacer la representación real de la cadena "Hay al menos 5 marcas de automóviles". La cantidad de elementos de la lista debe pasarse de la función Coches como accesorios al componente Información.
La adición está funcionando, pero cuando trato de devolver la variable de conteo como accesorios al componente getCount con , falla debido a demasiadas re-renderizaciones y no he podido hacer que esto funcione.
const Cars = () => { const [car, setCar] = useState(''); const [list, setList] = useState([]); const handleClick=(e)=>{ e.preventDefault(); setList((ls)=>[...ls, car]) setCar(""); } const getCount = () => { //This only feature is to return the size of the list let count = 0; count = list.length; return count; } return ( <div> <Info data={getCount()}/> //This is crashing the app from too many re-renders <h1>Enter a car brand!</h1> <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/> <button type="button" onClick={handleClick}>Save</button> <ul> { list.map((car, i) => ( <li key = {i}>{car}</li> )) } </ul> </div> ) } //This components itself works, tried testing with an actual const Info = (props) => { //number input and it works. But with getCount input it crashes const [text, setText] = useState(''); if(props.data > 2) { setText("There's at least 5 car brands"); } return ( <div> <h2>{text}</h2> </div> ) }Si llama a un setter de estado en el renderizado, eso provocará un nuevo renderizado.
Si el estado de su aplicación es tal que la condición que da como resultado que se llame al setter de estado es verdadera, obtendrá infinitas re-renderizaciones.
En este caso, no hay necesidad de un estado en la información; solo use una variable simple que alterna entre la cadena vacía y la cadena "Hay al menos 5 marcas de automóviles".
const Info = ({ data }) => { const text = data > 2 ? 'There's at least 5 car brands' : ''; return ( <div> <h2>{text}</h2> </div> ); };También
<Info data={getCount()}/>simplifica a
<Info data={list.length} /> o puede cambiar el nombre de la propiedad a listLength . (Los nombres de variables precisos hacen que el código sea más legible y pueden reducir los errores)
Cuando la lista cambia, solo se muestra el conteo
const Cars = () => { const [car, setCar] = useState(''); const [list, setList] = useState([]); const handleClick=(e)=>{ e.preventDefault(); setList((ls)=>[...ls, car]) setCar(""); } useEffect(()=>{ getCount() },[list]) const getCount = () => { //This only feature is to return the size of the list let count = 0; count = list.length; return count; } return ( <div> <Info data={() => getCount()}/> //You can change here <h1>Enter a car brand!</h1> <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/> <button type="button" onClick={handleClick}>Save</button> <ul> { list.map((car, i) => ( <li key = {i}>{car}</li> )) } </ul> </div> ) }O harás esto
const Cars = () => { const [car, setCar] = useState(''); const [list, setList] = useState([]); const [listCount, setlistCount] = useState(0); const handleClick=(e)=>{ e.preventDefault(); setList((ls)=>[...ls, car]) setCar(""); } useEffect(()=>{ getCount() },[list]) const getCount = () => { //This only feature is to return the size of the list setlistCount(list.length) } return ( <div> <Info data={listCount}/> //You can change here <h1>Enter a car brand!</h1> <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/> <button type="button" onClick={handleClick}>Save</button> <ul> { list.map((car, i) => ( <li key = {i}>{car}</li> )) } </ul> </div> ) }O harás esto
const Cars = () => { const [car, setCar] = useState(''); const [list, setList] = useState([]); const handleClick=(e)=>{ e.preventDefault(); setList((ls)=>[...ls, car]) setCar(""); } return ( <div> <Info data={list.length}/> //You can change here <h1>Enter a car brand!</h1> <input type="text" value={car} onChange={(e)=>setCar(e.target.value)}/> <button type="button" onClick={handleClick}>Save</button> <ul> { list.map((car, i) => ( <li key = {i}>{car}</li> )) } </ul> </div> ) }