Entonces, lo que estoy tratando de hacer es pasar un número al componente secundario, que solo se pasará en el primer renderizado. Después de eso, estoy tratando de cambiar el valor actual y pasar el valor del elemento secundario al componente principal. Sin embargo, no puedo pasar el precio al niño, ya que estoy recibiendo undefined .
No estoy seguro de cómo puedo pasar los datos en este contexto, ¿alguna idea?
function Parent(props, {price}) { const [amount, setAmount] = React.useState("200"); function handleChange (newValue) { setValue(newValue); } // We pass a callback to Child return <Child price={amount} value={value} onChange={handleChange} />; } function Child (props, {price}) { const [amount, setAmount] = React.useState(""); function handleChange(event) { setAmount(event.target.value) // Here, we invoke the callback with the new value props.onChange(event.target.value); } useEffect(() => { setAmount(price) //Pass value from parent if it has one }, []) return <input value={props.value} onChange={handleChange} /> }
Para este caso de uso, solo necesita pasar un valor del componente principal a su componente secundario. Está duplicando valores de una manera que es innecesaria y genera confusión. Utilice la variable de estado amount
o value
, no ambas.
Para arreglar esto:
amount
tanto en <Parent/>
como en <Child/>
.setValue()
a setAmount()
en la función handleChange()
.value
que se pasa a <Child/>
.{price}
de <Child/>
y acceda a la amount
en el gancho useEffect()
en su lugar a través de la propiedad de value
.Además:
props
y sintaxis {propVariable}
al mismo tiempo en la lista de parámetros de un componente. Use cualquiera de los dos, no ambos.Componente principal:
function Parent(props) { const [amount, setAmount] = useState("200"); function handleChange(newValue) { setAmount(newValue); // You can use this to test that the child component is triggering // the handleChange() function prop passed to it. console.log(newValue); } // We pass a callback to Child return <Child value={amount} onChange={handleChange} />; }
Componente hijo:
function Child(props) { const [amount, setAmount] = useState(""); function handleChange(event) { setAmount(event.target.value); // Here, we invoke the callback with the new value props.onChange(event.target.value); } useEffect(() => { setAmount(props.value); //Pass value from parent if it has one }, []); return <input value={props.value} onChange={handleChange} />; }
Sin embargo, incluso todo lo anterior dentro de <Child/>
no es necesario. Solo necesita los props
en el componente secundario, y no necesita mantener el estado interno de acuerdo con las mejores prácticas, es decir, tener una única fuente de verdad y controlar el estado solo en el elemento principal, por lo que puede modificar <Child/>
más para:
function Child(props) { function handleChange(event) { // Here, we invoke the callback with the new value props.onChange(event.target.value); } return <input value={props.value} onChange={handleChange} />; }