1

Делаю авторизацию в мобильном приложение на React Native через ВКонтакте. Токен и в последствии данные пользователя получаю, но есть ошибка Objects are not valid as a React child. Если убрать async у функции то ошибки нет, но тогда и данные от ВК я не получаю. Я прочитал о том, что render является синхронным и не будет ждать завершения асинхронных подпрограмм и подозреваю что ошибка из-за этого возникает но я не понимаю как исправить.

import * as AuthSession from 'expo-auth-session';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

async function App(e) {
        e.preventDefault();
        let redirectUrl = await AuthSession.getRedirectUrl();
        let result = await AuthSession.startAsync({
            authUrl: 'https://oauth.vk.com/authorize?client_id=7563861&display=mobile&redirect_uri=' + redirectUrl + '&response_type=token&v=5.92',
        });
        if (result.type === 'success') {
            const response = await fetch('https://api.vk.com/method/users.get?v=5.92&access_token=' + result.params.access_token);
            const user = await response.json();
            this.setState({
                name: user.response[0].first_name + ' ' + user.response[0].last_name
            });
        }
        const styles = StyleSheet.create({
            container: {
                flex: 1,
                backgroundColor: '#e9ebee',
                alignItems: 'center',
                justifyContent: 'center',
            },
            loginBtn: {
                backgroundColor: '#4267b2',
                paddingVertical: 10,
                paddingHorizontal: 20,
                borderRadius: 20
            },
            logoutBtn: {
                backgroundColor: 'grey',
                paddingVertical: 10,
                paddingHorizontal: 20,
                borderRadius: 20,
                position: "absolute",
                bottom: 0
            },
        });

        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.loginBtn} onPress={App}>
                    <Text style={{color: "#fff"}}>Войти с помощью ВКонтакте</Text>
                </TouchableOpacity>
            </View>
        );
}

export default App;

ошибка подробно

2 ответа 2

1

Работающий код для получения данных пользователя из ВК, необходимо только создать своё приложение в ВК и подставить в этот код его ID

import React, {useState, useEffect} from "react";
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import * as AuthSession from 'expo-auth-session';

const App = () => {

    const [hasError, setErrors] = useState(false);
    const [userData, setState] = useState({});

    useEffect(() => {
        async function fetchData() {
            let result = await AuthSession.startAsync({
        authUrl: 'https://oauth.vk.com/authorize?client_id=ЗДЕСЬIDПРИЛОЖЕНИЯ&display=mobile&redirect_uri=ЗДЕСЬВАШРЕДИРЕКТУРЛ(https обязательно)&response_type=token&v=5.92',
    });
            if (result.type === 'success') {
                const res = await fetch('https://api.vk.com/method/users.get?v=5.92&access_token=' + result.params.access_token);
                res
                    .json()
                    .then(res => setState(res))
                    .catch(err => setErrors(err));
            }
        }
        fetchData();
    });

    return (
        <View>
            <Text>{JSON.stringify(userData)}</Text>

            <Text> Has error: {JSON.stringify(hasError)}</Text>
        </View>
    );
};
export default App;
0

Пример подгрузки данных (useEffect, fetch, setState):

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> fetch </title>
</head>
<body>
<div class="calcContainer"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement

const FetchBackend = () => {
  const [state, setState] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => setState(json));
  }, []);

  return (
    e("div",{},
      e("h1",{}, "Server data fetching"),
      state && state.map(({ id, name, email }) => (
          e("div",{key:id}, "Name: "+name+" E-mail: "+email)
      ))
    )
  );
};

ReactDOM.render(e(FetchBackend), document.querySelector('.calcContainer'))

</script>
</body>
</html>

6
  • async функцией тоже можно -- вызвать из useEffect 23 авг 2020 в 19:05
  • Сергей, спасибо за ответ. Я прочитал про useEffect и переписал код. Получилось так: pastebin.com/yZkCGpqd Но теперь не приходят токен и данные пользователя из ВК, приложение ловит ошибку ibb.co/Xjcr2nF не пойму с чем может быть связанно, возможно fetch я неверно использую? 24 авг 2020 в 11:11
  • a новый вариант кода? 24 авг 2020 в 11:51
  • pastebin.com/yZkCGpqd 24 авг 2020 в 13:09
  • state.result.type -- стейт на момент тогорендера, после которого 1-й раз сработал useEffect. Попробуйте не смешивать then и await -- сделайте await ... json(), обычный }catch, берите .result из ответа, и setState только в конце. 24 авг 2020 в 15:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.