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

Question

我对Typescipt很陌生，正在尝试制作一个基本的Pin输入页面。 Sandbox link for my code 。尽管可以正常工作，但在第10行出现onChange函数错误：

类型'Dispatch >'不可分配给类型'（values ?: string）=> void'。 参数“值”和“值”的类型不兼容。 不能将类型'string'分配给类型'SetStateAction '。ts（2322）

我正在导入react-hook-pin-input，但找不到在ts中使用onChange的任何演示。请帮助我重写onChange，以使valueE成为输入的值。 react-hook-pin-input的来源可以在这里找到-https://github.com/elevensky/react-hook-pin-input

Answer 1

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

它只能为您错误地工作，因为您使用字符串初始化了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>
  );
}