类型 'Dispatch<SetStateAction<any[]>>' 不可分配给类型 '(values?: string) => void'

Question

我对 typescipt 还很陌生，正在尝试制作一个基本的 pin 输入页面。 Sandbox link for my code 。虽然它正在工作，但我在第 10 行的 onChange 函数收到此错误：

Type 'Dispatch<SetStateAction<any[]>>' is not assignable to type '(values?: string) => void'. Types of parameters 'value' and 'values' are incompatible. Type 'string' is not assignable to type 'SetStateAction<any[]>'.ts(2322)

我正在导入 react-hook-pin-input and I'm unable to find any demos to use onChange in ts. Please help me re-write onChange such that valueE becomes the value that is being entered. Source for react-hook-pin-input can be found here - https://github.com/elevensky/react-hook-pin-input

Answer 1

注意 onChange 是 (values?: string) => void 类型，而你传递的 setValueE 是 React.Dispatch<React.SetStateAction<string[]>> 类型，这意味着 setValueE 接受 string[]并且您在写作 onChange={setValueE}.

时传递了 string 类型

它只是错误地为你工作，因为你用字符串初始化 valueE 然后将它更改为 string 类型，为了让它按预期工作，请执行以下操作：

export default function App() {
  const [valueE, setValueE] = useState<string[]>([]);
  return (
    <div className="App">
      <h1>验证码</h1>
      <PinInput
        fields={4}
        values={valueE}
        onChange={(string) => setValueE([...string])}
      />
      <div> {valueE} </div>
    </div>
  );
}

Answer 2

我遇到过这个问题，几乎和你的问题一样，我遇到过

const [code, setCode] = useState('');
<TextField
   label="code"
   value={code}
   onChange={setCode}
/>

Typescript 没看懂，dispatcher 和 eventHandler 的类型不一样

Type 'Dispatch<SetStateAction>' is not assignable to type 'ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>'

然后我想出了这个包装函数，它解决了这个问题。

function withEvent(func: Function): React.ChangeEventHandler<any> {
  return (event: React.ChangeEvent<any>) => {
    const { target } = event;
    func(target.value);
  };
}

// then wrap your function with it
<TextField label="code" value={code} onChange={withEvent(setCode)} />

类型 'Dispatch<SetStateAction<any[]>>' 不可分配给类型 '(values?: string) => void'

Type 'Dispatch<SetStateAction<any[]>>' is not assignable to type '(values?: string) => void'

typescript

reactjs

typescript-typings

react-hooks

react-hook-form