類型 '(text: string) => void' 不可分配給類型 '() => void'

Question

我正在為 TextInput 創建一個自定義組件。 但是當我嘗試將 function 道具傳遞給自定義組件時遇到了問題。 這是代碼

// Screen.tsx
export const RegisterScreen = ({props}: Props) => {
  const [text, setText] = useState("");
 
  const onChangeInputText = (text: string) => setText(text);

  return (
    <View>
        <CustomInput onChangeText={onChangeInputText} text={text} />
    </View>

// CustomTextInput.tsx
type Props = {
  onChangeText: () => void;
  text?: string;
};

export const CustomInput = ({ onChangeText, text }: Props) => {
  return (
    <TextInput
      style={styles.container}
      onChangeText={onChangeText}
      value={text}
      placeholder="Type here"
    />
  );
};

使用此代碼，我收到此錯誤

Type '(text: string) => void' is not assignable to type '() => void'

我想我知道是什么原因造成的（它可能在類型聲明上？）但由於這實際上是我第一次嘗試 TypeScript，我真的不知道如何解決這個問題。 首先嘗試使用谷歌搜索，但我沒有發現任何類似於我的錯誤。

Answer 1

這個 function 的類型定義說“嘿，我需要傳遞一個字符串才能完成我的工作”：

const onChangeInputText = (text: string) => setText(text);

但是 onChangeText 屬性的定義說“我不會向你傳遞任何東西”：

type Props = {
  onChangeText: () => void;
  text?: string;
};

您的代碼實際上將傳遞一個字符串，因此您只需要更新道具上的類型。

type Props = {
  onChangeText: (val: string) => void;
  text?: string;
}