Question

所以我有以下自定义挂钩，我想使用它基于应用程序内的各种触发器来启用/禁用某些按钮。

import { useState } from 'react';

interface IDisableProps {
  buttonsDisabled: boolean;
  toggleButtons: (isDisabled: boolean) => void;
}

export default function useDisable(): IDisableProps {
  const [buttonsDisabled, setButtonsDisabled] = useState<boolean>(false);

  const toggleButtons = (isDisabled: boolean) => {
    setButtonsDisabled(isDisabled);
  };

  return {
    buttonsDisabled,
    toggleButtons,
  };
}

我使用它的地方之一是另一个钩子，在这里我将其声明为

const { buttonsDisabled, toggleButtons } = useDisable();，然后在合适的时候使用它，如

if (!buttonsDisabled) {
  toggleButtons(true);
}

但是，状态始终保持为初始状态。在toggleButtons中使用调试器输入后，我看到在本地范围内，this是未定义的，看不到buttonsDisabled的值。我在这里想念什么？我采用了错误的方法吗？

Answer 1

来自Building Your Own Hooks – React

两个组件是否使用相同的Hook共享状态？否。自定义Hook是一种可重用有状态逻辑的机制（例如设置订阅并记住当前值），但是每次使用时自定义钩子，其中的所有状态和效果都完全隔离。

因此，当您说“您正在使用的地方之一是另一个钩子”时，您将在内存中创建一个额外的[buttonsDisabled, setButtonsDisabled]，而不引用在其他地方创建的相同状态您已经调用了useDisable。

两种共享状态的方式是：1）传递道具和2）使用Context。

Answer 2

尝试

const toggleButtons = useMemo(isDisabled: boolean) => {
    setButtonsDisabled(isDisabled)
}, [isDisabled]);

Answer 3

您可以尝试导出数组而不是导出对象

export [buttonsDisabled, toggleButtons];

自定义反应钩子不更新其价值

3 个答案: