Как добавить еще один массив в useState?

В React, для хранения состояния компонента, мы можем использовать хук useState. Хук useState позволяет нам создавать и обновлять переменные-состояния внутри функционального компонента.

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

Давайте рассмотрим простой пример. Предположим, у нас есть компонент-функция, который отображает список пользователей:

import React, { useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ]);

  const [newUsers, setNewUsers] = useState([]);

  const handleAddUser = () => {
    const newUser = { id: users.length + 1, name: 'New User' };
    setNewUsers([...newUsers, newUser]);
  };

  return (
    <div>
      <h2>Users:</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>

      <h2>New Users:</h2>
      <ul>
        {newUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>

      <button onClick={handleAddUser}>Add User</button>
    </div>
  );
}

export default UserList;

В данном примере мы используем две переменные состояния: users, которая содержит список пользователей, и newUsers, которая содержит новых пользователей, добавленных после рендеринга компонента.

Обратите внимание на функцию handleAddUser, которая вызывается при нажатии на кнопку "Add User". В этой функции мы создаем нового пользователя и используем функцию setNewUsers для добавления его в массив newUsers. При этом мы создаем новый массив, используя оператор spread, чтобы сохранить предыдущие элементы newUsers и добавить новый элемент.

Затем, возвращая JSX в компоненте, мы отображаем список пользователей из переменной состояния users и список новых пользователей из переменной состояния newUsers.

В итоге, при каждом нажатии на кнопку "Add User", новый пользователь будет добавляться в массив newUsers, и список новых пользователей будет отображаться на странице.