Question

我有一个自定义钩子来处理某个状态变量。

每当您更改状态时，它不会立即更新，因此我必须使用 useEffect 订阅它。

然而，在 useEffect 中调用自定义钩子是绝对不可能的。

如何让他们的自定义钩子对状态变量做任何事情？

Answer 1

您不能（不应该）在 useEffect 中调用自定义钩子，但可以在自定义钩子中使用 useEffect：

const useMyHook = function( someState ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState ]);
};

如果钩子也应该在其他变化时更新，你也可以传递它：

const useMyHook = function( someState, someDependency ){
    useEffect( function(){
        // do what the hook should do
    }, [ someState, someDependency ]);
};

我建议对依赖项使用数组，这样它的工作方式类似于 useEffect：

const useMyHook = function( label, dependencies ){

    const [ value, setValue ] = useState(0);

    useEffect( function(){
        setValue( value + 1 );
    }, [ label, ...dependencies ]);

    return label + ': ' + value;
};

// ...

const value = useMyHook('counter', [ dependentValue, otherDependentValue ]);

如何使自定义钩子响应状态变化？

1 个答案: