#reactjs #typescript #architecture #frontend
Вопрос:
Я пытаюсь получить доступ getData() из GetDataService своего компонента функции React DataComponent() , но я продолжаю получать эту ошибку, и я не знаю, как это решить.
Ошибка типа: Не удается прочитать свойства неопределенного (чтение «getData»)
GetDataService
export default class GetDataService { private dataRepo: DataRepository constructor(dataRepo: DataRepository) { this.dataRepo = dataRepo; } getData() { return this.dataRepo.getData(); } } Хранилище, которое я впрыскиваю
export default interface DataRepository { getData: () =gt; Promiselt;Responsegt;; } Класс, который извлекает мои данные и реализует репозиторий
export default class DataFetch implements DataRepository { dataurl = 'http://localhost:8080/data'; getData(): Promiselt;Responsegt; { return Promise.resolve(fetch(this.dataurl)); } } Компонент
function DataComponent() { const [data, setData] = useState([]); const getDataService = new GetDataService(dataRepo); useEffect(() =gt; { getDataService.getData() .then(res =gt; { return res.json(); }) .then(data =gt; { console.log('Data ' JSON.stringify(data)); setData(data); }) }, []) ... } Комментарии:
1. Похоже
dataRepo, что это не определено, когда вы создаете новый экземплярGetDataService. Где вы создаете экземплярdataRepoв компоненте? Является ли создание экземпляра асинхронным? Если это так, вам нужно будет учесть это и дождаться созданияdataRepoэкземпляра , прежде чем создавать экземплярGetDataService, скорее всего, с другимuseEffect.2. В этой строке
const getDataService = new GetDataService(dataRepo);откудаdataRepoберется? потому что это кажется неопределенным.3. Я создаю экземпляр dataRepo в файле моего компонента с помощью let dataRepo: DataRepository;. Реакция не показывает мне ошибку в моей консоли, только в моем браузере. Я новичок в теме внедрения зависимостей, поэтому не вижу, что я делаю не так.