Tengo algunos problemas para desestructurar accesorios cuando paso un objeto a un componente secundario. Este objeto tiene 2 valores, uno es otro objeto y el segundo es una función.
Este es mi código en caso de que alguno de ustedes pueda ayudar: Parent cmp:
export const AdminScreen = () => { const {kolorTokenContract, setContract} = useContext(ContractsContext); console.log("contract from admin: ", kolorTokenContract); return ( <div className="container"> <h1>Administrator Screen</h1> <hr /> <div className="row align-items-center"> <ERC20AdminForm props={{kolorTokenContract, setContract}} /> <TokenInfo {...kolorTokenContract} /> </div> <hr /> <Balance /> </div> ); };Niño cmp:
export const ERC20AdminForm = ({kolorTokenContract, setContract}) => { //console.log("props from erc20admin form: ", props); console.log("contract from erc20admin form: ", kolorTokenContract); return ( <div className="col-8 col-md-6 col-sm-4 "> <MintingForm props={kolorTokenContract} /> <SetVaultForm /> <TransferOwnershipForm /> </div> ); };Si registro el "kolorTokenContract" simplemente no estoy definido :(. ¡Gracias de antemano por cualquier ayuda!
Para el componente hijo:
const ERC20AdminForm = (props:any) => { console.log("contract from erc20admin form: ", props.kolorTokenContract); return ( <div className="col-8 col-md-6 col-sm-4 "> <MintingForm kolorTokenContract={props.kolorTokenContract} /> <SetVaultForm /> <TransferOwnershipForm /> </div> ); };Llamada de un padre con accesorios separados:
<ERC20AdminForm kolorTokenContract={kolorTokenContract} setContract={setContract} />Este es uncódigo sandbox para prueba de concepto.
En su pantalla de administración, debe verificar el kolorTokenContract . ¿Qué devuelve el contexto? ¿De dónde sacas el valor de kolorTokenContract , viene de una API? si es así, supongo que al definir el estado no le diste un valor. Para la solución, puede dar un objeto vacío mientras define el kolorTokenContract en su contexto o puede establecer un valor predeterminado
const {kolorTokenContract = {}, setContract} = useContext(ContractsContext);