Как создать приложение React с нагрузкой больше возможностей с использованием реакций крюков

Автор оригинала: Yogesh Chavan.

В этой статье мы создадим приложение React, используя компоненты класса. Затем мы преобразуем его в функциональные компоненты, используя реактивный крюк в пошаговый путь.

Создавая это приложение, вы узнаете:

Как сделать API звонки
Как реализовать нагрузку больше возможностей
Как отладки проблем приложений
Как использовать Async/ждут
Как обновить компонент, когда что-то меняется
Как исправить проблему бесконечного петли в крючке использования
Как ревертировать компоненты на основе классов в функциональные компоненты с крючками

и многое другое.

Так что давайте начнем.

Начальная установка проекта

Создайте новый проект, используя Create-React-App :

npx create-react-app class-to-hooks-refactoring

Как только проект создан, удалите все файлы из SRC Папка и создать index.js Файл и styles.csss Файл внутри SRC папка. Также создайте Компоненты Папки внутри SRC папка.

Установите Axios Библиотека, выполняя следующую команду из папки проекта:

yarn add axios@0.21.1

Открыть styles.csss Файл и добавьте содержимое от Этот Github Repo к этому.

Как создать начальные страницы

Создайте новый файл под названием Header.js внутри Компоненты Папка со следующим содержанием:

import React from "react";

const Header = () => {
  return Random Users;
};

export default Header;

Создайте новый файл под названием App.js внутри SRC Папка со следующим содержанием:

import React from 'react';
import Header from './components/Header';

export default class App extends React.Component {
  render() {
    return (
      
        
        App Component
      
    );
  }
}

Теперь откройте index.js Файл и добавьте следующий контент к нему:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css';

ReactDOM.render(, document.getElementById('root'));

Теперь запустите приложение, запустив Пряжа начать команда с терминала.

Вы увидите следующий экран, если вы получите доступ к приложению в http://localhost: 3000/ Отказ

Как сделать вызов API

Мы будем использовать Случайные пользователи API, чтобы получить список случайных пользователей.

Так что откройте свой App.js Файл и добавьте ComponentDidmount Метод внутри компонента:

componentDidMount() {
    axios
      .get('https://randomuser.me/api/?page=0&results=10')
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => console.log('error', error));
  }

Кроме того, импортировать Axios В верхней части файла:

import axios from 'axios';

Ваш весь App.js файл будет выглядеть так сейчас:

import React from 'react';
import Header from './components/Header';
import axios from 'axios';

export default class App extends React.Component {
  componentDidMount() {
    axios
      .get('https://randomuser.me/api/?page=0&results=10')
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => console.log('error', error));
  }

  render() {
    return (
      
        
        App Component
      
    );
  }
}

Здесь мы делаем вызов API, чтобы изначально получить список из 10 записей к URL https://randomuser.me/api/?page=0&results=10 Отказ

Теперь, если вы проверяете приложение, вы увидите ответ от API в консоли.

Теперь давайте объявляем состоянию хранить результат и флаги, связанные с сообщениями по загрузке и ошибкам.

Заменить содержимое App.js со следующим кодом:

import React from 'react';
import Header from './components/Header';
import axios from 'axios';

export default class App extends React.Component {
  state = {
    users: [],
    isLoading: false,
    errorMsg: ''
  };

  componentDidMount() {
    this.setState({ isLoading: true });
    axios
      .get('https://randomuser.me/api/?page=0&results=10')
      .then((response) => {
         this.setState({ users: response.data.results, errorMsg: '' });
      })
      .catch((error) =>
        this.setState({
          errorMsg: 'Error while loading data. Try again later.'
        })
      )
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { users, isLoading, errorMsg } = this.state;
    console.log(users);

    return (
      
        
        {isLoading && Loading...}
        {errorMsg && {errorMsg}}
      
    );
  }
}

Здесь мы объявили государство непосредственно внутри класса, используя Свойства класса Синтаксис который является обычным способом записи состояния в классовых компонентах.

state = {
  users: [],
  isLoading: false,
  errorMsg: ''
};

Тогда внутри ComponentDidmount Метод, мы впервые устанавливаем загружает Государство в правда прежде чем сделать вызов API.

this.setState({ isLoading: true });

Как только мы получим ответ API, мы храним результат в Пользователи Массив, который объявлен в штате. Мы также устанавливаем errormsg Состояние для пустого, так что если есть какие-либо предыдущие ошибки, они будут очищены.

this.setState({ users: response.data.results, errorMsg: '' });

И в .catch Блок, мы устанавливаем errormsg В случае, если есть какая-либо ошибка при создании вызова API.

Тогда мы используем .finally Блок для установки загружает Государство в ложь Отказ

.finally(() => {
  this.setState({ isLoading: false });
});

Использование Наконец помогает нам избежать дублирования кода здесь, потому что нам не нужно устанавливать загружает к ложь в .then и в .catch Блок снова. Это потому, что Наконец Блок всегда будет выполнен, будь то успешным или нет.

А в методе рендеринга мы отображаем либо сообщение об ошибке, либо погрузочному сообщению вместе с Пользователи Массив из состояния в консоли.

Теперь, если вы проверяете приложение, вы увидите Пользователи Информация в консоли на успехе или сообщение об ошибке на UI для отказа API.

Как отобразить информацию о пользователей

Теперь давайте покажем Пользователи Информация на экране.

Создать новый файл User.js внутри Компоненты Папка со следующим содержанием:

import React from "react";

const User = ({ name, location, email, picture }) => {
  return (
    
      
        
      
      
        
          Name: {name.first} {name.last}
        
        
          Country: {location.country}
        
        
          Email: {email}
        
      
    
  );
};

export default User;

Теперь создайте новый файл Userslist.js внутри Компоненты Папка со следующим содержанием:

import React from 'react';
import User from './User';

const UsersList = ({ users }) => {
  return (
    
      {users && users.map((user) => )}
    
  );
};

export default UsersList;

Теперь откройте App.js Файл и заменить оказывать Способ со следующим кодом:

render() {
  const { users, isLoading, errorMsg } = this.state;

  return (
    
      
      {isLoading && Loading...}
      {errorMsg && {errorMsg}}
      
    
  );
}

Вот, мы проезжаем Пользователи Массив как опоры Пользовательскийлист составная часть. Внутри Пользовательскийлист Компонент, мы связываемся над массивом и отправляя информацию о пользователе на Пользователь Компонент, распространяя все свойства отдельных Пользователь как {... реквизит} Отказ Это, наконец, отображает данные на экране.

Кроме того, импортировать Пользовательскийлист Компонент в верхней части файла:

import UsersList from './components/UsersList';

Если вы проверяете приложение сейчас, вы увидите следующий экран:

Как вы можете видеть, на каждом обновлении страницы на экране отображается новый набор случайных пользователей.

Как добавить нагрузку больше возможностей

Теперь добавим дополнительную функцию нагрузки, которая позволит нашему приложению загрузить следующий набор из 10 пользователей на каждую нагрузку.

Изменить оказывать Метод App.js Файл в следующий код:

render() {
  const { users, isLoading, errorMsg } = this.state;

  return (
    
      
      
      {errorMsg && {errorMsg}}
      
        
      
    
  );
}

Здесь мы добавили загружает Проверьте внутри кнопки, чтобы отобразить либо Загрузка ... или Нагрузка Подробнее Текст на кнопке.

Добавить новый страница свойство государству и инициализировать его на 0 Отказ

state = {
  users: [],
  page: 0,
  isLoading: false,
  errorMsg: ''
};

И добавьте loadmore Функция обработчика перед оказывать Способ увеличения страница Значение состояния на 1 на каждой кнопке нажмите.

loadMore = () => {
  this.setState((prevState) => ({
    page: prevState.page + 1
  }));
};

Здесь мы используем предыдущее состояние для расчета следующего значения состояния страницы, поэтому вышеуказанный код такой же, как указанный ниже код:

loadMore = () => {
  this.setState((prevState) => {
    return {
      page: prevState.page + 1
    };
  });
};

Мы просто используем SnaThand Shreaddax ES6 для возврата объекта из функции.

Теперь внутри ComponentDidmount Метод, измените URL API из следующего кода:

'https://randomuser.me/api/?page=0&results=10'

К настоящему коду:

`https://randomuser.me/api/?page=${page}&results=10`

Здесь мы используем литеративный синтаксис шаблона ES6 для использования динамического значения страница Состояние Чтобы загрузить следующий набор пользователей на каждую кнопку.

Разрушение страница от состояния внутри ComponentDidmount Метод такой:

componentDidMount() {
  const { page } = this.state;
  ....
}

Теперь давайте проверим функцию приложения.

Как вы можете видеть, когда мы нажимаем на Загрузить больше Кнопка, страница Состояние меняется в инструментах RACT DEV, но мы не получаем новый список пользователей, отображаемых на экране.

Это потому, что даже если мы меняем страница Состояние, мы не делаем запрос API еще раз, чтобы получить следующий набор пользователей с измененным страница ценить. Итак, давайте исправим это.

Создать новый BadUsers функция выше loadmore Функция и переместить весь код из ComponentDidmount Внутри BadUsers функция. Затем позвоните BadUsers Функция из ComponentDidmount метод.

Кроме того, добавьте ComponentDidupdate Метод внутри Приложение Компонент, как это:

componentDidUpdate(prevProps, prevState) {
  if (prevState.page !== this.state.page) {
    this.loadUsers();
  }
}

Как мы обновляем стоимость страница Состояние в loadmore Функция, как только состояние обновляется, ComponentDidupdate Метод будет вызван. Таким образом, мы проверяем, если предыдущая стоимость состояния страница не равно текущей стоимости состояния. Затем мы заставляем звонок API снова, позвонив закладки функция.

Ваш полный App.js файл будет выглядеть так сейчас:

import React from 'react';
import Header from './components/Header';
import axios from 'axios';
import UsersList from './components/UsersList';

export default class App extends React.Component {
  state = {
    users: [],
    page: 0,
    isLoading: false,
    errorMsg: ''
  };

  componentDidMount() {
    this.loadUsers();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.page !== this.state.page) {
      this.loadUsers();
    }
  }

  loadUsers = () => {
    const { page } = this.state;

    this.setState({ isLoading: true });
    axios
      .get(`https://randomuser.me/api/?page=${page}&results=10`)
      .then((response) => {
        this.setState({ users: response.data.results, errorMsg: '' });
      })
      .catch((error) =>
        this.setState({
          errorMsg: 'Error while loading data. Try again later.'
        })
      )
      .finally(() => {
        this.setState({ isLoading: false });
      });
  };

  loadMore = () => {
    this.setState((prevState) => ({
      page: prevState.page + 1
    }));
  };

  render() {
    const { users, isLoading, errorMsg } = this.state;

    return (
      
        
        
        {errorMsg && {errorMsg}}
        
          
        
      
    );
  }
}

Теперь, если вы проверяете приложение снова, запустив Пряжа начать Команда вы увидите следующий экран:

Как видите, мы получаем новый список пользователей, отображаемых на каждой кнопке нагрузки. Но вопрос заключается в том, что мы можем видеть только 10 пользователей одновременно.

Итак, давайте внесем изменения, чтобы добавить новых пользователей в уже отображаемый список пользователей.

Для этого нам нужно изменить то, как мы устанавливаем Пользователи штат.

Наш текущий SetState Позвоните в BadUsers Функция выглядит так:

this.setState({ users: response.data.results, errorMsg: '' });

Здесь мы всегда заменяем Пользователи Массив с новым набором пользователей. Так что измените вышеуказанное SetState Позвоните в следующий код:

this.setState((prevState) => ({
  users: [...prevState.users, ...response.data.results],
  errorMsg: ''
}));

Здесь мы используем синтаксис Updater Of SetState Отказ Мы создаем новый массив, распространяя уже добавленные Пользователи Используя ... Prevstate.Users , а затем мы добавляем новый набор Пользователи Используя ... Ответ.data.results Отказ

Так что так мы не потеряем предыдущие загруженные Пользователи Данные, и мы также сможем добавить новый набор Пользователи Отказ

Теперь, если вы снова проверяете приложение, вы увидите правильное поведение загрузки данных.

Как улучшить код с помощью Async/ждут

Если вы проверяете BadUsers Функция, вы увидите, что код выглядит сложно и сложно прочитать.

loadUsers = () => {
  const { page } = this.state;

  this.setState({ isLoading: true });
  axios
    .get(`https://randomuser.me/api/?page=${page}&results=10`)
    .then((response) => {
      this.setState((prevState) => ({
        users: [...prevState.users, ...response.data.results],
        errorMsg: ''
      }));
    })
    .catch((error) =>
      this.setState({
        errorMsg: 'Error while loading data. Try again later.'
      })
    )
    .finally(() => {
      this.setState({ isLoading: false });
    });
};

Мы можем исправить это с помощью синтаксиса Async/en a enque.

Во-первых, нам нужно отметить BadUsers Функция как async:

loadUsers = async () => {

Потому что мы можем использовать ждать Ключевое слово только внутри функции, которая объявляется как async Отказ

Теперь замените BadUsers Функция со следующим кодом:

loadUsers = async () => {
  try {
    const { page } = this.state;

    this.setState({ isLoading: true });
    const response = await axios.get(
      `https://randomuser.me/api/?page=${page}&results=10`
    );

    this.setState((prevState) => ({
      users: [...prevState.users, ...response.data.results],
      errorMsg: ''
    }));
  } catch (error) {
    this.setState({
      errorMsg: 'Error while loading data. Try again later.'
    });
  } finally {
    this.setState({ isLoading: false });
  }
};

Здесь мы использовали Ждите ключевое слово до Axios.get Позвоните, что следующая строка кода, которая является SetState Вызов не будет выполнен, пока мы не получим ответ от API.

Если есть какая-либо ошибка при получении ответа от API, поймать Блок будет выполнен. Наконец Блок установит загружает Государство в ложный .

Вы изменили App.js файл будет выглядеть так сейчас:

import React from 'react';
import Header from './components/Header';
import axios from 'axios';
import UsersList from './components/UsersList';

export default class App extends React.Component {
  state = {
    users: [],
    page: 0,
    isLoading: false,
    errorMsg: ''
  };

  componentDidMount() {
    this.loadUsers();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.page !== this.state.page) {
      this.loadUsers();
    }
  }

  loadUsers = async () => {
    try {
      const { page } = this.state;

      this.setState({ isLoading: true });
      const response = await axios.get(
        `https://randomuser.me/api/?page=${page}&results=10`
      );

      this.setState((prevState) => ({
        users: [...prevState.users, ...response.data.results],
        errorMsg: ''
      }));
    } catch (error) {
      this.setState({
        errorMsg: 'Error while loading data. Try again later.'
      });
    } finally {
      this.setState({ isLoading: false });
    }
  };

  loadMore = () => {
    this.setState((prevState) => ({
      page: prevState.page + 1
    }));
  };

  render() {
    const { users, isLoading, errorMsg } = this.state;

    return (
      
        
        
        {errorMsg && {errorMsg}}
        
          
        
      
    );
  }
}

Теперь BadUsers Функциональный код выглядит очень чище и легче понять, чем раньше. И если вы проверяете приложение, вы увидите, что приложение также работает правильно.

Как реформируйте код компонента класса для функционального кода компонента

Мы закончили построить полную функциональность приложения. Итак, давайте ревертируем код для использования функциональных компонентов с реактивными крючками.

Создайте новый файл под названием Appfunctional.js внутри SRC Папка со следующим содержанием:

import React from 'react';

const AppFunctional = () => {
  return (
    
      Functional Component
    
  );
};

export default AppFunctional;

Мы создали новый файл для функционального компонента, чтобы вы сможете сравнить как код, так и сохранить его для справки.

Теперь откройте index.js Файл и замените содержимое файла следующим кодом:

import React from 'react';
import ReactDOM from 'react-dom';
import AppFunctional from './AppFunctional';
import './styles.css';

ReactDOM.render(, document.getElementById('root'));

Здесь мы использовали AppFunctional Компонент внутри оказывать метод И мы также добавили импорт на то же самое в верхней части файла.

Теперь, если вы перезапустите свое приложение, используя Пряжа начать Команда вы увидите следующий экран:

Итак, мы правильно отображаем AppFunctional Копосопользователь на экране.

Теперь замените содержимое AppFunctional Компонент со следующим кодом:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Header from './components/Header';
import UsersList from './components/UsersList';

const AppFunctional = () => {
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    const loadUsers = async () => {
      try {
        setIsLoading(true);
        const response = await axios.get(
          `https://randomuser.me/api/?page=${page}&results=10`
        );

        setUsers([...users, ...response.data.results]);
        setErrorMsg('');
      } catch (error) {
        setErrorMsg('Error while loading data. Try again later.');
      } finally {
        setIsLoading(false);
      }
    };

    loadUsers();
  }, []);

  const loadMore = () => {
    setPage((page) => page + 1);
  };

  return (
    
      
      
      {errorMsg && {errorMsg}}
      
        
      
    
  );
};

export default AppFunctional;

Здесь мы изначально заявили о необходимых штатах, используя Уместите крюк:

const [users, setUsers] = useState([]);
const [page, setPage] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [errorMsg, setErrorMsg] = useState('');

Тогда мы добавили Useffect крючок и прошел пустой массив [] как второй аргумент к нему. Это означает, что код внутри Useffect Крюк будет выполнен только один раз, когда компонент установлен.

useEffect(() => {
 // your code
}, []);

Мы перевели весь BadUsers Функция внутри Useffect крючок, а затем назвал его внутри крючка, как это:

useEffect(() => {
  const loadUsers = async () => {
    // your code
  };

  loadUsers();
}, []);

Мы также удалили все ссылки на Это Как функциональные компоненты не нужны это контекст.

Прежде чем сделать вызов API, мы устанавливаем загружает Государство в правда Использование setisloading (true); Отказ

Как у нас уже есть доступ к Пользователи Массив внутри компонента, мы напрямую устанавливаем как новый массив для Setusers Функция такая:

setUsers([...users, ...response.data.results]);

Тогда мы изменили loadmore Функция из следующего кода:

loadMore = () => {
  this.setState((prevState) => ({
    page: prevState.page + 1
  }));
};

К настоящему коду:

const loadMore = () => {
  setPage((page) => page + 1);
};

Тогда мы скопировали оказывать Содержание метода, как он внутри AppFunctional Компонент для возврата JSX. Мы также изменили onclick = {this.loadmore} к onclick = {loadmore} Отказ

return (
  
    
    
    {errorMsg && {errorMsg}}
    
      
    
  
);

Теперь, если вы проверяете приложение, вы увидите следующий экран:

Как видите, пользователи правильно загружаются, но нагрузка больше функций не работает.

Это потому, что мы только делаем вызов API один раз, когда компонент установлен, как мы передаем пустой массив зависимости [] Как второй аргумент для Useffect крюк.

Чтобы позвонить API снова, когда страница Состояние изменения, нам нужно добавить страница как зависимость для Useffect Крюк, как это:

useEffect(() => {
  // execute the code to load users
}, [page]);

Вышеуказанное Useffect так же, как написать следующий код:

componentDidUpdate(prevProps, prevState) {
  if (prevState.page !== this.state.page) {
    // execute the code to load users
  }
}

Useffect Делает очень легко написать меньше кода, который легко понять.

Так что теперь с этим изменением, код внутри Useffect Крючок будет выполнен при установке компонентов, а также, когда страница состояние изменено.

Теперь, если вы проверяете приложение, вы увидите, что нагрузка больше возможностей работает снова, как и ожидалось.

Но если вы проверяете подсказку Terminal/Command, вы можете увидеть предупреждение, как показано ниже (если у вас есть Eslint Установлено на вашем компьютере):

Эти предупреждения помогают нам избежать проблем в нашем приложении, которые могут произойти позже, поэтому всегда приятно их исправить, если это возможно.

Как мы ссылаемся на Пользователи Состояние внутри BadUsers Функция, нам нужно включить, что также в массиве зависимостей. Итак, давайте сделаем это.

Включить Пользователи как зависимость наряду с страница нравится:

useEffect(() => {
  // your code
}, [page, users]);

Давайте проверяем функцию приложения сейчас.

Как видите, мы постоянно получаем новый набор пользователей, когда мы прокручиваем страницу, и приложение идет в бесконечный цикл.

Это потому, что когда компонент установлен, код внутри Useffect Крючок будет выполнен, чтобы сделать вызов API. Как только мы получим результат, мы устанавливаем Пользователи множество.

Как Пользователи упоминается в списке зависимостей, однажды Пользователи Массив изменен, Useffect будет работать снова, и это произойдет снова и снова создает бесконечную петлю.

Итак, чтобы исправить это, нам нужно избегать ссылки на внешние Пользователи Массив как-то. Для этого давайте будем использовать синтаксис Updater Set Supply для установки Пользователи штат.

Поэтому измените следующий код:

setUsers([...users, ...response.data.results]);

К настоящему коду:

setUsers((users) => [...users, ...response.data.results]);

Здесь мы используем предыдущее значение пользователей для создания нового Пользователи множество.

Теперь мы можем удалить Пользователи от Useffect Массив зависимостей, так как мы не ссылаемся на внешний Пользователи Переменная.

Вы изменили Useffect Крюк будет выглядеть так:

useEffect(() => {
  const loadUsers = async () => {
    try {
      setIsLoading(true);
      const response = await axios.get(
        `https://randomuser.me/api/?page=${page}&results=10`
      );

      setUsers((users) => [...users, ...response.data.results]);
      setErrorMsg('');
    } catch (error) {
      setErrorMsg('Error while loading data. Try again later.');
    } finally {
      setIsLoading(false);
    }
  };

  loadUsers();
}, [page]);

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

И мы также не получаем никаких ошибок в терминале сейчас.

Спасибо за прочтение!

Вы можете найти полный исходный код для этого приложения в Этот репозиторий и живая демонстрация развернутого приложения здесь Отказ

Начиная с ES6, есть много полезных дополнений к JavaScript, как:

Разрушение ES6
Импорт и синтаксис экспорта
Функции стрелки
Обещания
Async/a ждать
Дополнительный оператор цепи и намного больше.

Вы можете узнать все обо всех функциях ES6 + подробно в моем Овладение современным JavaScript книга.

Кроме того, вы можете проверить мой Бесплатно Введение в React Router Курс для изучения React Router с нуля.

Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn Отказ

Оригинал: “https://www.freecodecamp.org/news/build-a-react-application-with-load-more-functionality-react-hooks/”

Начальная установка проекта

Как создать начальные страницы

Random Users

App Component

Как сделать вызов API

App Component

Как отобразить информацию о пользователей

Как добавить нагрузку больше возможностей

Как улучшить код с помощью Async/ждут

Как реформируйте код компонента класса для функционального кода компонента

Functional Component

Спасибо за прочтение!

Читайте ещё по теме: