¿Cómo puedo recorrer una matriz para mostrar el valor?
Aquí está mi siguiente código:
ineligiblePointsTableRows() { return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => { return { applied: (<input value={0} disabled className="applied-pts-input" />), reason: ( <div className="ineligible-reason-container"> <i className="fa fa-exclamation-triangle"></i> <p aria-label={contract.reason}>{contract.reason.map((reason: any, i: any) => ( <text>Hello world</text> ))}</p> </div> ), }, }; }); } Recibí un error en la línea contract.reason.map
El objeto es posiblemente 'indefinido'.ts(2532) (parámetro) contract: ContractUsage No hay arreglos rápidos disponibles
cuando consuelo. console.log(contract.reaons) este es el valor:
Array(2) 0: "Cannot borrow usage this far in the future." 1: "Contract has a past due balance."Entonces, mi objetivo es que estoy tratando de recorrer contract.reason pero tengo un error como el anterior. Cómo puedo arreglar esto ?
Es un error mecanografiado que le dice que el objeto podría estar "indefinido" o, en otras palabras, podría estar vacío de cualquier valor.
Pocas formas posibles de resolver esto:
1.
ineligiblePointsTableRows() { return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => { return { applied: (<input value={0} disabled className="applied-pts-input" />), reason: ( <div className="ineligible-reason-container"> <i className="fa fa-exclamation-triangle"></i> <p aria-label={contract?.reason}>{contract?.reason?.map((reason: any, i: any) => ( <text>Hello world</text> ))}</p> </div> ), }, }; }); } ineligiblePointsTableRows() { return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => { return { applied: (<input value={0} disabled className="applied-pts-input" />), reason: ( <div className="ineligible-reason-container"> <i className="fa fa-exclamation-triangle"></i> {contract !== undefined && <p aria-label={contract.reason}>{contract.reason.map((reason: any, i: any) => ( <text>Hello world</text> ))}</p>} </div> ), }, }; }); }Significa que su contract o motivo de contract.reason posiblemente no está definido. Para evitar el error, use optional chaining como este:
contract?.reason?.map