Response-apollo не может прочитать карту свойств undefined
товарищи хакеры! Итак, я новичок в использовании React-Apollo и Graphql. В настоящее время у меня есть запрос, который выглядит так ...
query GET_USER($id: Int!) {
getUser(id: $id) {
id
firstname
lastname
pets {
id
name
}
}
}
Подача его в свой реквизит ...
const { data: { getUser = [] } } = this.props;
И пытаюсь нанести на карту домашних животных, используя ...
{getUser.pets.map(pet =>
<div>
{pet.name}
</div>
)}
После многих попыток мне не удалось успешно обработать данные. Хотя, если я console.info (getUser.pets), я верну массив объектов.
(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: "Ginger", __typename: "Pet", Symbol(id): "Pet:1"}
1: {id: 2, name: "Marco", __typename: "Pet", Symbol(id): "Pet:2"}
2: {id: 3, name: "Bella", __typename: "Pet", Symbol(id): "Pet:3"}
3: {id: 4, name: "Chiki", __typename: "Pet", Symbol(id): "Pet:4"}
length: 4
__proto__: Array(0)
Вот ссылка на репозиторий файлов https://github.com/Jesus369/frendapet/blob/master/src/routes/userpage/UserRoute.js
Есть предложения о том, как предоставить данные клиенту?
На данный момент единственная ошибка, которую я получаю, это «Невозможно прочитать карту свойств undefined». getUser не является асинхронной функцией и использует joinMonster для получения данных. В состоянии ничего не хранится. Используя запрос, предоставленный gql, я могу передать данные как реквизиты. Ведение журнала консоли происходит под функцией render () вместе с передачей данных.
Что делает эта линия? const { data: { getUser = [] } } = this.props; Должен быть просто const { getUser } = this.props;?
getUser всегда должен быть объектом, а не массивом.
И глядя на ваш запрос, вы устанавливаете домашних животных как объект: pets { id name } не массив объектов?
Возможно, вы подходите к проблеме неправильно. Вы не должны использовать какую-либо логику, которая имеет дело с данными в методе render(). То есть вы не должны сразу вызывать функции для выборки данных в методе render(). Более того, я бы не стал использовать блок try / catch, который у вас есть с информацией о пользователях и электронной почте. Это должно быть сделано в методах жизненного цикла, таких как componentDidMount(). Метод render () ожидает, что данные уже где-то определены или находятся в процессе выборки (выполняется другим методом).
Затем вы проверяете с помощью if (!this.props.data.whatever) { return <div>Loading</div>; }, чтобы вернуть какое-то сообщение прядильщика / загрузки, если данные еще не определены / не готовы (вы также можете использовать this.props.data.loading, я думаю, он есть. Сделайте console.info(this.props), чтобы увидеть, что на самом деле находится в объекте). если блок не выполняется, он продолжает рендеринг, потому что данные были определены.
Спасибо за помощь вам двоим! Я пробовал оба метода, но мне не повезло. Я наконец нашел решение! @Chase DeAnde, я исправил свой getUser и превратил его в объект, а не в массив, спасибо! Я закончил тем, что передал домашних животных из своего UserRoute на свой BottomTab в качестве реквизита и отрендерил его как pets = [], теперь таким образом я могу перебирать массив домашних животных. Обновил мой GitHub, чтобы показать результаты
У вас есть ошибки? Где ты делаешь свой console.info?
getUser- это асинхронная функция? Вы храните что-нибудь в состоянии?