Question

第24行出现错误

“字符串”类型的参数无法分配给类型的参数 'SetStateAction'.ts（2345）

使用打字稿进行反应实验。

const App: React.FC = () => {
  const [name, setName] = React.useState<string>(null);
  const [tel, setTel] = React.useState<number | undefined>(null);

  return (
    <div>
      <input
        value={name}
        type="text"
        placeholder="name"
        onChange={e => setName(e.target.value)}
      />
      <input
        value={tel}
        type="number"
        placeholder="tel."
        onChange={e => setTel(e.target.value)} // here?
      />
    </div>
  );
};

https://codesandbox.io/s/silly-moore-wve1p

type =“ text”不会发生这种情况，我已经指定了类型，这很奇怪。

Answer 1

正如我在评论中提到的，添加parseInt（）将事件中的string类型数字更改为数字，将与您为此useState设置的类型匹配

我还更改了useState's的初始值以匹配其定义的类型。

  const App: React.FC = () => {
  const [name, setName] = React.useState<string>('');
  const [tel, setTel] = React.useState<number | undefined>(undefined);

  return (
    <div>
      <input
        value={name}
        type="text"
        placeholder="name"
        onChange={e => setName(e.target.value)}
      />
      <input
        value={tel}
        type="number"
        placeholder="tel."
        onChange={e => setTel(parseInt(e.target.value))}
// setTel('12312')<string>  => setTel(parseInt('12312'))<number>
      />
    </div>
  );
};

type =“ number”在onChange中对打字稿做出误判？

1 个答案: