Как правильно использовать ловушку useState в React?

Question

Я немного запутался с использованием ловушки useState () в React. Я хочу хранить некоторые данные в состоянии компонента, например значения из формы - имя, minValue и maxValue. Как должен выглядеть мой код?

const [state, setState] = useState({
   name: '',
   minValue: 0,
   maxValue: 9
});

или

const [name, setName] = useState('');
const [minValue, setMinValue] = useState(0);
const [maxValue, setMaxValue] = useState(9);

Является ли какой-либо из этих подходов лучше или они равны?

Answer 1

Хотя оба будут работать, я бы посчитал второй лучше, так как его легче читать и обновлять. Если вы хотите обрабатывать более сложные объекты, взгляните на useReducer().

Answer 2

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

const [state, setState] = useState({
       name: '',
       minValue: 0,
       maxValue: 9
    });

    setState(prevData => ({
              ...prevData,
              name: value
              minValue: value
            }))

, вы можете использовать этот подход, если у вас меньше переменных состояния и им легче управлять

const [name, setName] = useState('');
const [minValue, setMinValue] = useState(0);
const [maxValue, setMaxValue] = useState(9);

setName(value);
setMinValue(value);
setMaxValue(value);

Answer 3

useState () возвращает текущее значение состояния и метод для обновления этого значения состояния. Там вы можете установить любой тип объекта, массива или строки и т. Д. Например:

const [someState, setSomeState] = useState('something')                                    

Чтобы манипулировать состоянием, вы должны вызывать такую ​​функцию:

const someFunction = () => { setSomeState('new state') }                                              

Надеюсь, чтоhelpes.