类型 '(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;
}