Question

我在我的React项目中使用钩子。
我写了一个函数来管理钩子中的状态。
但我不知道它是否是最佳。

这是我的功能： 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

您不能按照Rules of Hooks中所述在循环\回调内使用钩子。

因此，此类代码容易出错，由于短绒棉无法猜到它是自定义钩子，因此您不会收到警告的唯一原因。

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

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

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

此外，此代码段中几乎没有错误：

state和initialState将在每个渲染器上重新分配。
使用map而没有返回值。
如上所述的挂钩规则。
不是错误，而是在这些摘录中，您似乎试图在一个函数中使用来自类的OOP方法，而钩子会激发您进行函数式编程。

请参阅Using Custom Hooks

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是什么？它没有在任何地方使用。

反应挂钩状态管理

2 个答案: