我被難住了幾個小時，試圖找出在 createContext 函式上設定什么作為我的默認值。這是我的代碼。
// PetTypeProvider.tsx
import { useState, createContext, useContext } from 'react';
const PetTypeContext = createContext('');
const UpdatePetTypeContext = createContext((event:React.MouseEvent<HTMLElement>) => event);
export function usePetType() {
return useContext(PetTypeContext)
}
export function useUpdatePetType() {
return useContext(UpdatePetTypeContext)
}
interface PetTypeProviderProps {
children: JSX.Element|JSX.Element[];
}
export const PetTypeProvider: React.FC<PetTypeProviderProps> = ({children}) => {
const [petType, setPetType] = useState('Dogs');
const togglePet = (event:React.MouseEvent<HTMLElement>) => setPetType(event.currentTarget.innerText);
return (
<PetTypeContext.Provider value={petType}>
<UpdatePetTypeContext.Provider value={togglePet}>
{children}
</UpdatePetTypeContext.Provider>
</PetTypeContext.Provider>
);
};
在我的 <UpdatePetTypeContext.Provider> 上，我將值設定為我的切換功能，該功能將寵物型別切換為所選的寵物型別。
const togglePet = (event:React.MouseEvent<HTMLElement>) => setPetType(event.currentTarget.innerText);
TS 編譯器用這個對我大喊大叫
Type '(event: React.MouseEvent<HTMLElement>) => void' is not assignable to type '(event: React.MouseEvent<HTMLElement>) => React.MouseEvent<HTMLElement, MouseEvent>'.
Type 'void' is not assignable to type 'MouseEvent<HTMLElement, MouseEvent>'.ts(2322)
index.d.ts(329, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<(event: MouseEvent<HTMLElement, MouseEvent>) => MouseEvent<HTMLElement, MouseEvent>>'
感謝您花時間閱讀我的問題
我嘗試將 設定為const PetTypeContext = createContext(MouseEvent);無效。老實說，我只需要 TS 的正確默認值和資料型別，我就迷路了。代碼有效，但 TS 編譯器不喜歡它，因為沒有給出默認值。
uj5u.com熱心網友回復：
嘗試以下
const UpdatePetTypeContext = createContext((event:React.MouseEvent<HTMLElement>) => {});
你想要一個什么都不回傳的函式，而不是一個回傳事件本身的函式。
uj5u.com熱心網友回復：
我很確定你不想event從處理程式中回傳
改變：
(event:React.MouseEvent<HTMLElement>) => event
至：
(event:React.MouseEvent<HTMLElement>) => {}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533610.html