React Native. Objects are not valid as a React child

Question

Делаю авторизацию в мобильном приложение на 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;

Answer 1

Пример подгрузки данных (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>

Answer 2

Работающий код для получения данных пользователя из ВК, необходимо только создать своё приложение в ВК и подставить в этот код его 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;

БЛОГ НА HUSL

React Native. Objects are not valid as a React child

Ответы (2 шт):