Реагировать на хуки состояния управления

Question

Я использую хуки в своем проекте реакции. Я написал функцию для управления состоянием в хуках. но я не знаю, является ли это оптимальным. Это моя функция: mapStateToDOM. js

import {useState} from 'react';

const mspStateToDOM = (initialState, state) => {
    Object.keys(initialState).map(item => {
        let [current, setCurrent] = useState(initialState[item]);
        state[item] = {get: () => current, set: setCurrent};
    });
};
export default mspStateToDOM;

И с ее помощью я могу получить переменную из состояния, используя state.varName.get() И я могу изменить переменную, используя state.varName.set(SOME_VALUE)

Вот мой код:

import React from 'react';
import mspStateToDOM from '../config/mapStateToDOM/mapStateToDOM';

const Counter = () => {
    const state = {};
    const initialState = {
        count: 5,
        count2: 6
    };
    mspStateToDOM(initialState, state);
    return (
        <div>
            <p>You clicked {state.count.get()} times</p>
            <button
                onClick={() => {
                    state.count.set(state.count.get() + 1);
                }}>
                Click Me!
            </button>
        </div>
    )
};
export default Counter;

Это делает код намного чище, удобочитаемее и проще в использовании. и мне не нужно определять сеттер для каждой переменной и много раз использовать 'useState' в моем коде. но я не знаю, является ли это оптимальным. Это 1011 *

Answer 1

Вы не можете использовать хуки внутри цикла \ обратного вызова, как указано в Правилах хуков .

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

Попробуйте добавить префикс use к своему имени пользовательского хука и посмотрите предупреждение:

React Hook useState нельзя вызвать внутри обратного вызова. React Hooks должны вызываться в компоненте функции React или в пользовательской функции React Hooks. ( реакции-крючки / правила-крючки )

const useMapStateToProps = (initialState, state) => {
  Object.keys(initialState).map(item => {
    let [current, setCurrent] = useState(initialState[item]);
    state[item] = { get: () => current, set: setCurrent };
  });
};

Кроме того, в этом фрагменте есть несколько ошибок:

1. state и initialState будут переназначаться при каждом рендере.
2. Использование map без возвращаемого значения.
3. Правила крючков, как указано выше.
4. Не ошибка, но в этих фрагментах кажется, что вы пытаетесь использовать OOP подход, который исходит от классов, в функции, в то время как хуки мотивируют вас для функционального программирования.

• См. Использование пользовательских крючков

Answer 2

В дополнение к тому, что сказал Деннис Ва sh.

Эта строка: state.count.set(state.count.get() + 1) может быть легко заменена на state.count.set(prevState => { return prevState + 1 })

Кроме того, я предлагаю сделать

const state = {};
const initialState = {
        count: 5,
        count2: 6
};

const Counter = () => {
    const [state, setState] = useState(initialState);
    return (
        <div>
            <p>You clicked {state.count} times</p>
            <button
                onClick={() => {
                    setState(prevState => ({ ...prevState, count: prevState.count + 1 }) );
                }}>
                Click Me!
            </button>
        </div>
    )
};

Не нужно слишком усложнять вещи.

Но что с count2? Он нигде не использовался.