#javascript #reactjs #react-native #http #axios
Вопрос:
Я использую собственный API Google react для запроса данных календаря через HTTP — запрос с помощью axios.
После того, как пользователь нажимает кнопку входа в систему, функция calendarData запускается и успешно извлекает данные, которые я использую setCalendarEvents для настройки состояния моей страницы на эти данные ответа.
Я ожидал, что это приведет к повторному отображению экрана и отображению данных, но это не так…Как я могу инициировать обновление страницы после получения этих данных из HTTP-запроса без повторного отображения вручную?
государство
const [calendarEvents, setCalendarEvents] = useState([]); Функция calendarData ЗАПУСКАЕТСЯ ПОСЛЕ НАЖАТИЯ ПОЛЬЗОВАТЕЛЕМ КНОПКИ ВХОДА В СИСТЕМУ
const calendarData = async function signInWithGoogleAsync() { try { const result = await Google.logInAsync({ androidClientId: `['CLIENT ID]`, iosClientId: `['CLIENT ID']`, scopes: [ "profile", "email", "https://www.googleapis.com/auth/calendar", "https://www.googleapis.com/auth/calendar.events", ], }); if (result.type === "success") { axios({ //HTTP GET REQUEST FOR DATA method: "get", baseURL: "https://www.googleapis.com/calendar/v3/calendars/['USER CALENDAR]/events?key=['API KEY']", headers: { Authorization: "Bearer " result.accessToken, Accept: "application/json", }, }) .then((response) =gt; { const responseDataArray = []; //RESPONSE DATA response.data["items"].map((event) =gt; { if (typeof event["start"].dateTime !== undefined) { responseDataArray.push(event); } //SET STATE TO RETREIVED AND FILTERED DATA STORED IN responseDataArray setCalendarEvents(responseDataArray); }); }) //CATCH ERRORS .catch((error) =gt; console.log(error)); } else { return { cancelled: true }; } } catch (e) { return { error: true }; } }; ГДЕ ДАННЫЕ ДОЛЖНЫ ОТОБРАЖАТЬСЯ НА ЭКРАНЕ ПОСЛЕ УСПЕШНОГО ПОЛУЧЕНИЯ
return ( lt;Viewgt; {calendarEvents.map((event) =gt; { lt;Viewgt;{event}lt;/Viewgt; } } lt;/Viewgt; ) ПРИМЕР ЭЛЕМЕНТА ДАННЫХ ОТВЕТА
Я ищу, чтобы отфильтровать "start":{"dateTime":"2021-04-16T17:30:00-04:00"} , если он существует
{"kind":"calendar#event","etag":""3237003518996000"","id":"7t1q67ai1p7t586peevd7s9mhg","status":"confirmed","htmlLink":"https://www.google.com/calendar/event?eid=N3QxcTY3YWkxcDd0NTg2cGVldmQ3czltaGcgbWF0dEBoZWFydGhkaXNwbGF5LmNvbQ","created":"2021-04-14T16:45:34.000Z","updated":"2021-04-15T15:49:19.498Z","summary":"customer journey beta buddies","creator":{"email":"meilin@hearthdisplay.com"},"organizer":{"email":"meilin@hearthdisplay.com"},"start":{"dateTime":"2021-04-16T17:30:00-04:00"},"end":{"dateTime":"2021-04-16T18:30:00-04:00"},"iCalUID":"7t1q67ai1p7t586peevd7s9mhg@google.com","sequence":0,"attendees":[{"email":"meilin@hearthdisplay.com","organizer":true,"responseStatus":"accepted"},{"email":"matt@hearthdisplay.com","self":true,"optional":true,"responseStatus":"accepted"},{"email":"susie@hearthdisplay.com","responseStatus":"accepted"},{"email":"nathalie@hearthdisplay.com","responseStatus":"accepted"}],"hangoutLink":"https://meet.google.com/xyb-qhpb-uej","conferenceData":{"entryPoints":[{"entryPointType":"video","uri":"https://meet.google.com/xyb-qhpb-uej","label":"meet.google.com/xyb-qhpb-uej"},{"entryPointType":"more","uri":"https://tel.meet/xyb-qhpb-uej?pin=3822838393771","pin":"3822838393771"},{"regionCode":"US","entryPointType":"phone","uri":"tel: 1-818-514-5197","label":" 1 818-514-5197","pin":"222000933"}],"conferenceSolution":{"key":{"type":"hangoutsMeet"},"name":"Google Meet","iconUri":"https://fonts.gstatic.com/s/i/productlogos/meet_2020q4/v6/web-512dp/logo_meet_2020q4_color_2x_web_512dp.png"},"conferenceId":"xyb-qhpb-uej","signature":"AGirE/Jmi4pFHkq0kcqgRyOuAR2r"},"reminders":{"useDefault":true},"eventType":"default"} Комментарии:
1. Вы уже доказали себе, что responseDataArray-это определенно список, содержащий материалы?
2. О, и не называйте setCalendarEvents на карте. Поскольку это асинхронная функция, которая просто не имеет смысла. Вместо этого вычислите, каким вы хотите видеть новое состояние, а затем установите его один раз.
3. Под фильтром вы подразумеваете свою
if (typeof time !== undefined)линию? Это ничего не делает, потому что оператор typeof всегда возвращает строку. Если вы покажете пример того, что такое reponse.data.items, я легко смогу показать код, который составит нужный вам список.4. О, и ваш
calendarEvents.mapна самом деле ничего не возвращает. Это действительно распространенная ошибка в JS, потому что без фигурных скобок есть неявное возвращение. Это легко уловить, сначала войдяcalendarEventsв систему и убедившись, что это список с содержимым, а затем проверив DOM, чтобы увидеть, есть ли тег lt;Viewgt; для каждого из них. Затем вы можете легко выполнить отладку оттуда.5. И просто для удовольствия: чтобы избавиться от мутации, вы можете написать
setCalendarEvents((response.data?.items || []).filter(e =gt; e?.start?.dateTime ?? false));вместо этого.
Ответ №1:
Может быть, попробуем с помощью этого добавить условный рендеринг :
return ({ calendarEvents.lengthgt;0 amp;amp; calendarEvents?.map(...your code) }) Комментарии:
1. я попробовал это, и я все еще получаю те же результаты, что и раньше. Я бы подумал, что это решение сработает, поэтому мне интересно, где я допустил ошибку….