Соедините передний конец React Native с задним концом Node

Question

Заранее извините, если это глупый вопрос, но я иду здесь кругами. Я довольно новичок, чтобы реагировать и нодить, и ищу, как соединить мой родной интерфейс реакции с моим узлом. Практически каждый учебник, который я читаю, говорит мне «вставить код API fetch после объявления класса и перед методом render», но у меня нет объявления класса или метода render ни в одном из моих кодов, поэтому я немного запутался о том, где поставить код API выборки? Я не знаю, имеет ли это огромное значение, но каждый экран моего приложения находится в своем собственном файле, как его собственная функция, и я использую стековый навигатор для перехода между экранами с его функциональностью, содержащейся в другом файле для стекового навигатора.

Если бы кто-нибудь мог предложить мне какую-то помощь, я был бы очень признателен, я не знаю, что делать.

Ниже приводится функция моего экрана входа в систему, поэтому вы можете видеть, что я имею в виду, когда говорю, что экраны настроены как функции. Все остальные экраны выложены одинаково. Пожалуйста, дайте мне знать, если вам нужно увидеть что-то еще, и я отредактирую и добавлю это!

import React from 'react';

function LoginScreen() {
  return(
  <View style={{ alignItems: "center", marginTop: 24 }}>
  <Text style={styles.text}>
    Login Screen
  </Text>
  </View>
 );
}

export default LoginScreen

Опять же, я был бы признателен за любую помощь, которую кто-либо может мне оказать, так как это сводит меня с ума, и я бы действительно хотел бы, чтобы это работало!

Answer 1

Итак, вы пытаетесь использовать функциональные компоненты вместо компонентов на основе классов.

В функциональных компонентах для отправки запроса FetchAPI мы используем React Hooks, useEffect для отправки запроса API и сохранения данных возврата Запрос API в другом хуке useState.

Подробнее о хуках React читайте здесь, https://reactjs.org/docs/hooks-intro.html

В приведенном выше сценарии запрос API api с функциональными компонентами будет как то так

import React, {useEffect, useState} from 'react';

function LoginScreen() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('yourapi.com/user')
    .then(res => res.json())
    .then(data => setData(data));
  }, []);

  return(
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text style={styles.text}>
        // You Can Use Your Data Here {data}
        Login Screen
      </Text>
    </View>
 );
}

export default LoginScreen

Answer 2

С функциональными компонентами вы объявляете свои "методы" внутри своей функции:

function LoginScreen() {
  const submit = () => {
    //do something 
  }

  return <View>
    <Button title="Submit" onPress={submit} />
  </View>
}

Answer 3

Самый профессиональный и менее многословный способ сделать это - использовать библиотеку ax ios. Проверьте этот код:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

import axios from 'axios';

export default function LoginScreen() {
  const [user, setUser] = useState({});

  const termToSearchFor = 'edilsonlm217';

  useEffect(() => {
    async function loadAPI() {
      const response = await axios.get(`https://api.github.com/users/${termToSearchFor}`);

      setUser(response.data);
    }

    loadAPI();
  }, []);

  return (
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text>
        {user.bio}
      </Text>
  </View>
  );
}

Этот фрагмент кода выполняет поиск моего пользователя "edilsonlm217" в API publi c github сразу после загрузки компонента. Он получает ответ из response.data и устанавливает его в состояние пользователя, затем выводит на экран мою биографию.

Не забудьте установить ax ios в качестве зависимости от вашего проекта перед его использованием.