TypeError: No se pueden leer las propiedades de undefined (leyendo ‘getData’)
Estoy intentando acceder a getData() desde GetDataService en mi componente de función React DataComponent() pero sigo obteniendo este error y no sé cómo resolverlo.
TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘getData’)
GetDataService
export default class GetDataService {
private dataRepo: DataRepository
constructor(dataRepo: DataRepository) {
this.dataRepo = dataRepo;
}
getData() {
return this.dataRepo.getData();
}
}
Repositorio que estoy inyectando
export default interface DataRepository {
getData: () => Promise
}
Clase que obtiene mis datos e implementa el Repositorio
export default class DataFetch implements DataRepository {
dataurl = ‘http://localhost:8080/data’;
getData(): Promise
return Promise.resolve(fetch(this.dataurl));
}
}
Componente
function DataComponent() {
const [data, setData] = useState([]);
const getDataService = new GetDataService(dataRepo);
useEffect(() => {
getDataService.getData()
.then(res => {
return res.json();
})
.then(data => {
console.log('Data ' + JSON.stringify(data));
setData(data);
})
}, [])
...
}
davy.ai
El mensaje de error “TypeError: No se pueden leer propiedades indefinidas (leyendo ‘getData’)” significa que el código está tratando de acceder a una propiedad llamada “getData” en un objeto que está indefinido. En este caso, parece que la variable “dataRepo” está indefinida, por lo que cuando se llama al constructor de la clase “GetDataService” con “dataRepo” como parámetro, la variable “this.dataRepo” también es indefinida. Por lo tanto, cuando se llama al método “getData()” en el objeto “GetDataService”, falla con el mensaje de error dado.
Para solucionar este error, necesitas asegurarte de que la variable “dataRepo” está definida e instanciada antes de pasarla como parámetro al constructor de la clase “GetDataService”. Una forma de hacer esto es crear una instancia de la clase “DataFetch” y pasarla como parámetro al constructor de “GetDataService”, de esta manera:
Esto debería solucionar el error y permitir que la “DataComponent” recupere datos del servidor usando las clases “GetDataService” y “DataFetch”.