时间戳

首页 > 解决方案 > React useState 道具：类型“字符串”不可分配给类型“数字”。TS2322

typescript - React useState 道具：类型“字符串”不可分配给类型“数字”。TS2322

问题描述

我正在尝试将 Props 传递给 React useState Hooks。我的道具和数字都是必需的，但我收到 Typescript 错误：

类型“字符串”不可分配给类型“数字”。TS2322

但我没有在任何地方传递字符串。所以，我不知道为什么我会得到这个 Typescript。我不想通过 props any。

import React, { useState } from "react";
import ReactDOM from "react-dom";

interface Props {
  strength: number;
  speed: number;
}

const Courseinfo = ({ strength, speed }: Props) => (
  <>
    <div>
      <h1>{strength}</h1>
      <h1>{speed}</h1>
    </div>
  </>
);

const App = () => {
  const [character, setCharacter] = useState<Props>({ // This Props throws me error 
    strength: 0,
    speed: 0,
  });

  const { strength, speed } = character;
  return (
    <>
      Strength:
      <input
        type="number"
        value={strength}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setCharacter({ ...character, strength: e.target.value })
        }
      />
      Speed:
      <input
        type="number"
        value={speed}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setCharacter({ ...character, speed: e.target.value })
        }
      />
      <Courseinfo strength={strength} speed={speed} />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

标签： typescriptuse-statereact-typescript

解决方案

input type="number"的值是一个字符串

这是固定的沙箱。

变化：

interface Props {
  strength: string;
  speed: string;
}

和事件的类型可以是

onChange={(e: React.ChangeEvent<HTMLInputElement>) =>

或者，您也可以转换event.target.value为数字（+event.target.number）而不是更改道具类型。

推荐阅读