Использование хука useState в React: заставьте его работать на вас

Откройте для себя силу хука useState в React для легкого управления состоянием компонента. с помощью useState вы можете легко создавать и обновлять переменные состояния, обеспечивая динамические и взаимодействующие пользовательские интерфейсы. Узнайте, как использовать простоту и гибкость хука useState для улучшения ваших приложений React.

Хук useState — это хук React, который позволяет вам управлять состоянием в функциональных компонентах. Это очень мощный инструмент, который можно использовать для создания сложных и динамичных пользовательских интерфейсов.

Что такое государство

• Состояние — это любые данные, которые со временем изменяются в вашем приложении. Например, количество товаров в корзине или текущее значение текстового ввода являются примерами состояния.

Как работает useState?

Хук useState принимает два аргумента: начальное значение состояния и функцию для обновления состояния. Хук возвращает массив с двумя значениями: текущее значение состояния и функцию для обновления состояния.

Например, следующий код создает переменную состояния с именем counter и инициализирует ее значением 0:

const [counter, setCounter] = useState(0);

Затем можно использовать переменную counter для доступа к текущему значению счетчика, а функцию setCounter можно использовать для обновления значения счетчика.

Плюсы использования состояния

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

Состояние можно обновить без создания нового компонента.

Состояние автоматически запоминается, что предотвращает ненужные повторные рендеры.

Минусы использования состояния

Состоянием может быть трудно управлять, особенно в сложных приложениях.

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

Состояние может замедлить работу вашего приложения, если оно используется неэффективно.

Пример.В следующем коде показан пример использования обработчика useState для создания простого счетчика:

import React, { useState } from 'react';

const Counter = () => {
  // Declare a state variable called "count" and initialize it to 0
  const [count, setCount] = useState(0);

  // Event handler to increment the count
  const increment = () => {
    setCount(count + 1); // Update the count state
  };

  // Event handler to decrement the count
  const decrement = () => {
    setCount(count - 1); // Update the count state
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Теперь давайте рассмотрим пример, чтобы понять его более подробно:

Мы получим пример профиля Github.

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

import React, { useState, useEffect } from 'react';
import './Style.css';

const GitHubProfile = () => {
  const [username, setUsername] = useState(''); // State for storing the entered GitHub username
  const [userData, setUserData] = useState(null); // State for storing the user data fetched from API
  const [isLoading, setIsLoading] = useState(false); // State for tracking the loading state
  const [error, setError] = useState(null); // State for storing any error that occurs during API fetch
  const [repositories, setRepositories] = useState([]); // State for storing the fetched repositories

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`https://api.github.com/users/${username}`);
        const data = await response.json();
        setUserData(data); // Update the user data state with the fetched data
        setIsLoading(false);
      } catch (error) {
        setError(error.message); // Update the error state if an error occurs during API fetch
        setIsLoading(false);
      }
    };

    const fetchRepositories = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`https://api.github.com/users/${username}/repos`);
        const data = await response.json();
        setRepositories(data); // Update the repositories state with the fetched data
        setIsLoading(false);
      } catch (error) {
        setError(error.message); // Update the error state if an error occurs during API fetch
        setIsLoading(false);
      }
    };

    if (username) {
      fetchUserData(); // Fetch user data if a username is provided
      fetchRepositories(); // Fetch repositories if a username is provided
    }
  }, [username]);

  const handleSearch = () => {
    setError(null);
    setUserData(null);
    setRepositories([]);
    if (username) {
      setUsername(username); // Set the entered username as the state value
    } else {
      setError('Please enter a username'); // Display an error if no username is entered
    }
  };

  return (
    <div className="container">
      <h2>GitHub Profile</h2>
      <div className="search">
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Enter GitHub username"
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      {isLoading && <p>Loading...</p>} {/* Display a loading message if the API request is in progress */}
      {error && <p>Error: {error}</p>} {/* Display an error message if an error occurs during API fetch */}

      <div className="profile-repo-section">
        {userData && (
          <div className="profile-section">
            <div className="card">
              <h3>{userData.login}</h3>
              <img src={userData.avatar_url} alt="Avatar" className="avatar" />
              <p>Followers: {userData.followers}</p>
              <p>Repositories: {userData.public_repos}</p>
            </div>
          </div>
        )}

        {repositories.length > 0 && (
          <div className="repositories-section">
            <h4>Repositories:</h4>
            <div className="repo-list">
              {repositories.map((repo) => (
                <div key={repo.id} className="repository">
                  <p>{repo.name}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default GitHubProfile;

Давайте разберемся во всех шагах кода:

Импорт зависимостей и CSS:

• Мы импортируем necessary dependencies, React, useState, useEffect и файл CSS, содержащий стили для нашего компонента.

Функциональный компонент:

• Мы определяем функциональный компонент с именем GitHubProfile, который представляет наш GitHub profile display.

Инициализация состояния:

• Мы инициализируем multiple state variables с помощью useState hook:
• username to store the entered GitHub username.
• userData для хранения пользовательских данных, полученных из GitHub API.
• isLoading для отслеживания состояния загрузки при fetching данных.
• error для хранения любой ошибки, возникающей во время API fetch.
• репозитории для хранения файлов fetched repositories.

Крюк с эффектом:

• Мы используем хук useEffect для извлечения пользовательских данных и репозиториев всякий раз, когда изменяется состояние имени пользователя.
• Внутри эффекта мы определяем две асинхронные функции, fetchUserData и fetchRepositories, для получения соответствующих данных.
• В fetchUserData мы делаем API вызов fetch user данных, используя GitHub API endpoint с предоставленным именем пользователя.
• В fetchRepositories мы делаем вызов API для получения репозиториев, используя GitHub API endpoint с provided username.
• Если указано имя пользователя, мы вызываем оба functions для получения данных.
• Мы обновляем соответствующие переменные состояния (userData и репозитории) с помощью полученных данных.
• Если во время выборки API возникает ошибка, мы обновляем состояние ошибки и устанавливаем для состояния загрузки значение false.

Функциональность поиска:

• Мы определяем handleSearch function для обработки действия поиска при нажатии кнопки «Поиск».
• Он очищает любые existing error, пользовательские данные и репозитории из состояния.
• Если указано имя пользователя, оно устанавливает состояние имени пользователя с введенным значением.
• Если имя пользователя не указано, оно устанавливает сообщение об ошибке в состоянии ошибки.

Рендеринг JSX:

• Мы возвращаем элементы JSX для рендеринга.
• Основной контейнер имеет имя класса «контейнер».
• Мы отображаем заголовок «GitHub Profile» и поле ввода поиска вместе с кнопкой «Поиск».
• Поле ввода управляется состоянием имени пользователя, и его значение обновляется, когда пользователь вводит.
• При нажатии кнопки вызывается handleSearch function.
  Если выполняется выборка API (isLoading имеет значение true), отображается сообщение о загрузке.
• Если во время выборки API возникает ошибка (ошибка не нулевая), мы отображаем сообщение об ошибке.
• Внутри контейнера profile-repo-section мы условно отображаем карточку профиля и список репозиториев.
• Если userData exists, мы отображаем карточку профиля, содержащую логин пользователя, аватар, подписчиков и repositories count.
• Если repositories содержит данные, мы отображаем раздел с заголовком «Repositories» и списком имен repositories.

Экспорт компонента:

• Мы экспортируем компонент GitHubProfile как экспорт по умолчанию.

Это подробное объяснение кода. Он извлекает пользовательские данные и репозитории из API GitHub на основе введенного имени пользователя и отображает информацию в карточке профиля и списке репозиториев.

А ТЕПЕРЬ САМЫЙ ОЖИДАННЫЙ РЕЗУЛЬТАТ ВСЕХ УСИЛИЙ:

— — — — — — — — — — — — — На этом все — — — — — — — — — — — — — —

Если вам понравилось читать этот блог, поделитесь им с друзьями и не забудьте подписаться на наш канал YouTube, чтобы получать больше интересного контента. Помогите нам рассказать о нашем опыте в разработке стека MERN, облачных вычислениях, React Native и Next.js, и следите за новостями, чтобы не пропустить новые информативные статьи. Вместе мы можем покорить мир технологий!

В разделе Проекты Mern Stack вы можете найти учебные пособия, советы, шпаргалки и другие проекты. Наши доклады также касаются фреймворков React, таких как NextJs и AWS Cloud. Присоединяйтесь к нам сегодня, чтобы быть в курсе новейших технологий🩷

📠 🏅:- Проекты Mern Stack

🎦 🥇:- Дневник Джары — YouTube 🚦

🎦 🥈 :- Эррормания — YouTube 🚦

На GITHUB:- raj-28 (Raj) (github.com)

💌 Подпишитесь на нашу рассылку, чтобы быть в курсе всех новых блогов 👍

…………🚦…🛣… ……………🚧🛑………………..▶……………….️

Используйте смайлики отсюда, если вам нужны….🚦🛣️🥇🥈🥉🏅🎖️🎦👍