分析: 最近在做React Hooks + TS的项目, 开发一个页面测试的时候发现禁用的按钮没有进行设置也将数据禁用了, 分析了一下原因, 是因为将disabled属性放在了useEffect的依赖项数组中, 而且首次加载就进行了设置, 总结下来就是需要阻止禁用的第一次加载。

解决方案:

使用了自定义Hook+useRef保存变量的形式, 以下是具体代码:

// 自定义一个初始不更新的hook
  const useUpdateEffect = (fn: Function, inputs: any[]) => {
    const didMountRef = useRef(false);
    useEffect(() => {
      if (didMountRef.current) fn();
      else didMountRef.current = true;
    }, inputs);
  };

// 定义处理函数
handleAllDisabled = () => {
    ...
}

// 使用自定义hook
useUpdateEffect(handleAllDisabled, [allDisabled]);