¿Por qué la identificación no está definida en la función randomCard cuando se usa onClick= {(randomCard()} y se define cuando se usa onClick = {() => (randomCard())}?
function Home() { const [cardlist, setCardList] = useState([]); const navigate = useNavigate() function randomCard() { const index = Math.floor(Math.random() * cardlist.length); const id = cardlist[index].id; navigate(`/cards/${id}`) } useEffect(() => { async function fetchData() { const res = await axios.get('https://db.ygoprodeck.com/api/v7/cardinfo.php'); const results = res.data; setCardList(results.data); console.log(cardlist); } fetchData(); }, []) return ( <div className='home'> <h1>Welcome to the Yu-Gi-Oh Database</h1> <p>Choose Option</p> <div className="options"> <ul> <li><a href='/allcards'>Show All Cards</a></li> <li><a href='/'>Search Card</a></li> <li><a href='' onClick={() => (randomCard())}>Random Card</a></li> </ul> </div> </div> ) }Uno solo usaría algo como
onClick={randomCard()}cuando esa función devuelve una función . Esta situación no es infrecuente, por ejemplo:
const makeHandleClick = (id) => () => { setClickedId(id); }; onclick={makeHandleClick(id)) Pero es un error común usar onClick={randomCard()} cuando en realidad solo desea ejecutar la función cuando se hace clic en el elemento, en cuyo caso ejecutará la función inmediatamente, cuando se represente, en lugar de cuando se haga clic (y a menudo dan como resultado demasiadas re-renderizaciones y un error).
Usar
onClick={randomCard}cuando desea que la función se ejecute cuando se hace clic en el elemento, y no cuando se representa el elemento.
Lo anterior es a menudo equivalente a
onClick={() => randomCard()}En React, el valor de onClick debe ser una devolución de llamada que devuelve algo (vacío) :
onClick={() => { console.log('clicked')} } Entonces, al pasar functions() como un valor a onClick, se ejecutará cuando el componente se represente. En su caso, onClick={randomCard()} se ejecutará antes de que ocurra la obtención de datos, lo que significa que la id de la tarjeta no está undefined . El siguiente código de ejemplo se registrará en la consola al renderizar y no al hacer clic:
// Outputs console log on render only function doSomething() { console.log('executed without click event') } return( <button type="button" onClick={doSomething()} > )Si está utilizando Typescript, verá un error al escribir:
Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'. Esto significa que estamos ejecutando JS (void) en lugar de pasar una devolución de llamada (MouseEventHandler) como valor.
A diferencia del manejo de eventos HTML DOM, donde puede pasar cualquier código JS como una cadena para hacer onclick y activará una función cuando se haga clic en un elemento. Por ejemplo:
// All work <button onclick="document.getElementById('demo').innerHTML=1">Click me</button> <button onclick="console.log('Hi')">Click me</button> <button onclick="alert('Hi')">Click me</button> <button onclick="greet()">Click me</button> <p id="demo"></p> function greet() { document.getElementById("demo").innerHTML = "Hello World"; }La respuesta clave a su pregunta es comprender la diferencia entre:
onClick={() => (randomCard())} esto es llamar a pedidoonClick= {randomCard()} y esto es solo una ejecución inmediata Le sugiero que investigue un poco para que le quede más claro, pero en pocas palabras, onClick={() => (randomCard())} esto se llama cuando hace clic en él y onClick= {randomCard()} esto se llama cuando se carga el archivo.
Cuando utilice "Ejecutar", sus datos no se obtendrán y se llamará a la función antes de que se asigne el valor setCardList a cardList. Pero cuando usa "Llamar", sus datos ya se han obtenido, y cardList contiene una matriz de datos.
Espero no haberlo confundido, solo investigue un poco y lo obtendrá, es muy simple, solo necesita obtener el flujo de renderizado del componente.