React 钩子状态管理

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;

这使得代码更清晰、可读且更易于使用。 而且我不必为每个变量定义一个 setter 并在我的代码中多次使用“useState”。
但我不知道它是否是最佳的。 是吗？

Answer 1

您不能在 Loop\\callback 中使用钩子，如钩子规则中所述。

因此，此类代码容易出错，这是您没有收到警告的唯一原因，因为 linter 无法猜测它是自定义 hook 。

尝试将use前缀添加到您的自定义钩子名称并查看警告：

React Hook useState不能在回调中调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。 （反应钩子/钩子规则）

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

添加丹尼斯·瓦什 (Dennis Vash) 所说的内容。

这一行： 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什么？ 它没有在任何地方使用过。