reactjs - TS ข้อผิดพลาด ประเภท 'false' ไม่มีลายเซ็นการเรียก TS (2349)

ฉันกำลังได้รับข้อผิดพลาด TS เกี่ยวกับ SetIsActive และข้อผิดพลาดคือ 'นิพจน์นี้ไม่สามารถเรียกใช้ได้ ไม่ใช่องค์ประกอบทั้งหมดของประเภท 'boolean | Dispatch' ที่สามารถเรียกใช้ได้ ประเภท 'false' ไม่มีลายเซ็นการเรียกใช้ TS(2349)' ไม่แน่ใจจริงๆ ว่าจะแก้ไขข้อผิดพลาดนี้อย่างไร ขอบคุณล่วงหน้า

คอมโพเนนต์ DetectOutsideClick มีข้อผิดพลาดเกี่ยวกับ 'e' และ 'contains' โดยมีข้อผิดพลาดว่า "Property 'contains' does not exist on type 'never'.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];
};

คำตอบ #1

เพียงใช้ return [isActive, setIsActive] as const; แล้วคุณก็พร้อมที่จะใช้งาน

เหมือนที่เพื่อนของเราคือ @tokland บอกในคำตอบของเขา TS ไม่มีวิธีที่จะแยกแยะ tuple จาก array และการสรุปมัน, as const ทำสิ่งนั้นให้คุณ

คุณสามารถอ่านเพิ่มเติมและเรียนรู้กับตัวอย่างอื่น ๆ ได้ในเอกสารอย่างเป็นทางการของ TS ที่นี่