TS错误类型'false‘没有呼叫签名TS (2349)

Question

我在SetIsActive上得到一个TS错误，错误是‘这个表达式是不可调用的。不是所有的组分都是可调用的。输入'false‘没有调用signatures.TS(2349)’并不确定如何修复错误，谢谢提前

DetectOutsideClick组件在'e‘和'contains’上有一个错误，错误的“属性”包含‘不存在’..ts(2339)“

import ArrowDown from '../../../assets/images/event-landing-pre-event/triangle-down.svg';
import { DetectOutsideClick } from './detect-outside-click';

export const DropDownButton = () => {
  const dropdownRef = useRef(null);
  const [isActive, setIsActive] = DetectOutsideClick(dropdownRef, false);
  const handleClick = () => setIsActive(!isActive);

  return (
    <div className="">
      <div className="">
        <button onClick={handleClick} className="flex items">
          <span className="text-blue-800 font-semibold mx-3">My registration</span>
          <img className="mr-1" src={ArrowDown} alt="User avatar" />
        </button>
        <nav
          ref={dropdownRef}
          className={`absolute top-8  w-80 opacity-0
          ${isActive ? 'opacity-100 visible' : ''}`}
        >
          <ul className="">
            <li className="block">
              <a href="#">Order Confirmation</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default DropDownButton;





import { useState, useEffect, MutableRefObject } from 'react';

export const DetectOutsideClick = (el: MutableRefObject<null>, initialState: boolean) => {
  const [isActive, setIsActive] = useState(initialState);

  useEffect(() => {
    const onClick = (e) => {
      if (el.current !== null && !el.current.contains(e.target)) {
        setIsActive(!isActive);
      }
    };

    if (isActive) {
      window.addEventListener('click', onClick);
    }

    return () => {
      window.removeEventListener('click', onClick);
    };
  }, [isActive, el]);

  return [isActive, setIsActive];
};

Answer 1

只要使用return [isActive, setIsActive] as const;，你就可以走了。

就像我们的伙伴@tokland在回答时说的那样，TS无法区分元组和数组并继续使用它，as const为您做了这件事。

您可以在非正式TS文档这里上阅读更多内容并与其他示例一起学习。