hola, estoy usando react js, cualquier consejo y sugerencia es muy apreciado aquí. El ciclo sharedfields forEach hace console.log el valor sharedFieldAlias, si lo hago console.log fuera del ciclo, no generará el valor. Necesito que el valor sharedFieldAlias se muestre en la etiqueta span, pero da un error de referencia de que sharedFieldAlias no está definido. ¿Cómo puedo mostrar el valor en la etiqueta span?
sharedfields.forEach((sharedField) => { let sharedFieldAlias = sharedField.alias; if(value.shared_field_uuid == sharedField.uuid) { console.log(sharedFieldAlias); } }); const fullLabel = ( <div style={{ display: 'flex', alignItems: 'center' }}> <InputLabel label={display_name} help={parameter.help?.header_id} /> {!isLinked ? ( <LinkOutlined onClick={linkField} style={{ color: blue.primary }} /> ) : ( <div> <CloseSquareOutlined onClick={unlinkField} style={{ color: yellow[7] }} /> <span className="ant-typography ant-typography-secondary" id="sharedFieldAlias" style={{ marginLeft: '5px', color: '#262626'}}> {sharedFieldAlias} </span> </div> )} </div> );Declare la variable sharedFieldAlias fuera del bucle (justo encima del bucle en su caso).
let sharedFieldAlias; <your loop goes here>Tienes que declarar la variable fuera del bucle. También podría ser útil usar un ciclo for en lugar de forEach para que pueda salir del ciclo una vez que se encuentre el valor.
let sharedFieldAlias; for (const sharedField of sharedfields) { if (value.shared_field_uuid == sharedField.uuid) { sharedFieldAlias = sharedField.alias; console.log(sharedFieldAlias); break; } }No hay necesidad de una variable global. Use find para verificar la matriz, busque un objeto donde coincidan los uuid y devuelva el alias; de lo contrario, devuelva 'Ninguno'.
const sharedFields = [ { alias: 'Bob', uuid: '1' }, { alias: 'Carol', uuid: '2' }, { alias: 'Sam', uuid: '3' }, { alias: 'Moses', uuid: '4' } ]; function getAlias(fields, uuid) { const found = fields.find(field => { return uuid === field.uuid; }); return found ? found.alias : 'None'; } console.log(getAlias(sharedFields, '3')); console.log(getAlias(sharedFields, '31')); console.log(getAlias(sharedFields, '2'));Aquí hay un pequeño ejemplo de trabajo en React.
function getAlias(fields, uuid) { const found = fields.find(field => { return uuid === field.uuid; }); return found ? found.alias : 'None'; } function Example({ data }) { return ( <div> <div>{getAlias(data, '3')}</div> <div>{getAlias(data, '31')}</div> <div>{getAlias(data, '2')}</div> </div> ); } const data = [ { alias: 'Bob', uuid: '1' }, { alias: 'Carol', uuid: '2' }, { alias: 'Sam', uuid: '3' }, { alias: 'Moses', uuid: '4' } ]; ReactDOM.render( <Example data={data} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>