¡Igual que el título! ¿Por qué no se puede recuperar el valor del estado cuando se pasa como (props) pero sí cuando se pasa ({props})?
Ejemplo de código:
import React, { useState } from 'react' const Header = (props) => { return ( <div> <h1>{props.text}</h1> </div> ) } const Button = (props) => ( <button onClick={props.handleClick}> {props.text} </button> ) const Statistic = props => ( <div><h2>{props.text}</h2></div>) const Statistics = ({props}) =>{ const total = props.good + props.neutral + props.bad console.log("total", total) return( <div></div> ) } const App = () => { // save clicks of each button to its own state const [clicks, setClicks] = useState({ good: 0, neutral: 0, bad: 0 }) const setClickToValue= newValue => { setClicks(newValue) } return ( <div> <Header text="Give feedback" /> <Button handleClick={ () => setClickToValue(clicks.good + 1) } text="Good" /> <Button handleClick={ () => setClickToValue(clicks.neutral + 1) } text="Neutral" /> <Button handleClick={ () => setClickToValue(clicks.bad + 1) } text="Bad" /> <Statistic text="Statistics" /> <Statistics props={clicks} /> </div> ) } export default AppPerdí una hora para darme cuenta de que pasar como ({props}) era la forma correcta. Pero sigo sin entender lo que está pasando, ¿alguien podría explicarlo amablemente?
¡Gracias amigos!
la razón es porque tienes una prop llamada props. <Statistics props={clicks} />
entonces el componente hijo obtiene esto como accesorios
props = { props: clicks }así que cuando lo usas así
const comp = props => { props.good } se rompe más o menos porque los accesorios solo tienen accesorios de llamadas de props
lo que tienes que hacer es algo como
<Statistics {...clicks} />ahora en el componente Estadísticas de yow obtendrás los accesorios correctos
const Statistics = props => { console.log(props) // {good: 0, neutral: 0, bad: 0} }Eso es porque el componente funcional de reacción tiene un argumento predeterminado llamado props que es un objeto. Para acceder al objeto props podemos acceder por . o [] notación para, por ejemplo, props.name y javascript también como funcionalidad llamada destrucción de objetos supongamos que tengo un objeto
let obj = {a:123,b:1243} // i can directly access the object property by destructuring let {a} = obj; console.log(a) //output 123echa un vistazo a la desestructuración --->