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

1. Множественные хуки useState: встроенный в React хук useState позволяет управлять состоянием функциональных компонентов. Вы можете использовать несколько экземпляров useState для независимой обработки разных состояний. Например:

import React, { useState } from 'react';
function MyComponent() {
  const [state1, setState1] = useState(initialState1);
  const [state2, setState2] = useState(initialState2);
  // ...component logic
  return (
    // ...JSX
  );
}

2. useReducer Hook: useReducer Hook является альтернативой useState и полезен для управления сложной логикой состояния. Он позволяет обновлять состояние на основе предыдущего состояния, аналогично Redux. Вы можете определить несколько редукторов для обработки разных частей состояния.

import React, { useReducer } from 'react';
function reducer1(state, action) {
  // ...handle state updates
}
function reducer2(state, action) {
  // ...handle state updates
}
function MyComponent() {
  const [state1, dispatch1] = useReducer(reducer1, initialState1);
  const [state2, dispatch2] = useReducer(reducer2, initialState2);
  // ...component logic
  return (
    // ...JSX
  );
}

3. Контекст React: Контекст предоставляет способ передачи данных через дерево компонентов без явной передачи реквизитов на каждом уровне. Вы можете создать несколько экземпляров контекста для управления различными состояниями и использовать их в соответствующих компонентах.

import React, { createContext, useContext, useState } from 'react';
const StateContext1 = createContext();
const StateContext2 = createContext();
function MyComponent() {
  const [state1, setState1] = useState(initialState1);
  const [state2, setState2] = useState(initialState2);
  // ...component logic
  return (
    <StateContext1.Provider value={{ state1, setState1 }}>
      <StateContext2.Provider value={{ state2, setState2 }}>
        // ...nested components
      </StateContext2.Provider>
    </StateContext1.Provider>
  );
}
function ChildComponent() {
  const { state1, setState1 } = useContext(StateContext1);
  const { state2, setState2 } = useContext(StateContext2);
  // ...component logic
  return (
    // ...JSX
  );
}

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