Tengo una etiqueta simple que muestra correctamente los datos JSON.

 <dd>{assessmentEntity.serialized}</dd>

Necesito analizar estos datos para que se vean legibles en la interfaz de usuario.

Seguía recibiendo un error que decía que los datos no están definidos , así que usé un registro de la consola para verificar.

 const json2 = assessmentEntity.serialized; console.log(json2);

¿Por qué dice que no está definido pero aún así puede representarlo? No puedo hacer esto o esto con éxito.

 const data = JSON.parse(assessmentEntity.serialized); .. <dd>{JSON.parse(assessmentEntity.serialized)}</dd>

Aquí está el resto de mi código.

 export interface IAssessmentDetailProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {} export const AssessmentDetail = (props: IAssessmentDetailProps) => { useEffect(() => { props.getEntity(props.match.params.id); }, []); const { assessmentEntity } = props; const json = '{ "fruit": "pineapple", "fingers": 10 }'; const obj = JSON.parse(json); const json2 = assessmentEntity.serialized; /* eslint-disable no-console */ console.log(json2); /* eslint-enable no-console */ return ( <div> <Row> <Col md="8"> <h2> <Translate contentKey="waTpaApp.tpaAssessment.detail.title">Assessment</Translate> [<b> ID = {assessmentEntity.id}</b>] </h2> </Col> </Row> <Row> Potential Enrollee Information </Row> <Row> <dl className="jh-entity-details"> <dt> Last Name </dt> <dd>{assessmentEntity.serialized}</dd> <dt> First Name </dt> {/* <dd>{data.enrollee.firstName}</dd> */} </dl> </Row> </div> ); }; const mapStateToProps = ({ assessment }: IRootState) => ({ assessmentEntity: assessment.entity, }); const mapDispatchToProps = { getEntity }; type StateProps = ReturnType<typeof mapStateToProps>; type DispatchProps = typeof mapDispatchToProps; export default connect(mapStateToProps, mapDispatchToProps)(AssessmentDetail);