Estoy llamando a un punto final que devuelve un objeto a mi tienda redux. El selector redux para ese objeto devuelve:
Coin selector: {zynecoin: {…}} zynecoin: {usd: 0.214749} [[Prototype]]: ObjectEste es el componente:
const ChartModal = (props) => { const coinSelector = useSelector(selectCoin); let coinValuesEnt = []; let coinValuesVal = []; React.useEffect(() => { if (coinSelector !== undefined) { coinValuesEnt = Object.entries(coinSelector); coinValuesVal = Object.values(coinSelector); console.log("Coin selector: ", coinSelector); console.log("Object.entries: ", coinValuesEnt[0]); console.log("Object.values: ", coinValuesVal[0]); } }, [coinSelector]); const style = { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: 400, bgcolor: "background.paper", border: "2px solid #000", boxShadow: 24, pt: 2, px: 4, pb: 3, }; return ( <Modal hideBackdrop open={props.openModal} onClose={props.handleModalClose} // aria-labelledby="child-modal-title" // aria-describedby="child-modal-description" > <Box sx={{ ...style, width: 300 }}> <h3>Coin: {props.coinText}</h3> <h3> Price: {/* {JSON.stringify(coinSelector).substring( JSON.stringify(coinSelector).lastIndexOf(":") + 1, JSON.stringify(coinSelector).length - 2 )} */} </h3> <CandleStickChart /> <Button onClick={props.handleModalClick1}>Show Full Chart</Button> <Button onClick={props.handleModalClick2}>Add to Portfolio</Button> </Box> </Modal> ); };He intentado ingresar el selector a Object.values y Object.entries en mi useEffect y cuando useEffect ejecuta los 3 console.logs devuelven:
Coin selector: {zynecoin: {…}}zynecoin: {usd: 0.214749}[[Prototype]]: Object Object.entries: (2) ['zynecoin', {…}] 0: "zynecoin" 1: {usd: 0.214749} length: 2 [[Prototype]]: Array(0) Object.values: {usd: 0.214749}usd: 0.214749[[Prototype]]: ObjectSolo necesito el número especificado por la clave usd y he probado varios métodos como:
coinValuesVal[0].usd coinValuesVal[0][0] coinValuesEnt.usd coinValuesEnt[1]y causan errores de compilación de usd indefinido, [0] indefinido, etc. La única forma en que he podido obtener el número de precio es la sección comentada en mi etiqueta h3, que no parece ser la forma correcta de hacerlo. ¿Qué estoy haciendo mal?
Así que dos partes del problema,
zynecoin que aparentemente cuando se accede solo devuelve { usd: <price> }usd Para obtener la clave usd del objeto zynecoin,
Object.keys(coinSelector.zynecoin)[0] (devuelve una matriz de claves en las que, dado que solo existe usd , solo necesitamos la primera).
Para obtener el valor, debe ser tan sencillo como,
coinSelector.zynecoin.usd
Si tiene problemas debido a undefined. No hay otras maneras de evitarlo. Tienes que poner un operador ternario para comprobar si existe o no coinSelector.zynecoin .
{ coinSelector.zynecoin && <Price code goes here> }O si está usando el último ES, use el encadenamiento opcional. (pero eso aún mostraría un precio vacío)
PD: useEffect se resuelve después de renderizar. Entonces, si ese selector desde el momento en que su componente se monta no está definido, irá primero con indefinido. No necesita usar ese gancho para el estado derivado. Simplemente coloque el código fuera del gancho.