如何在React中正确使用useState钩子？

Question

我试图在react with typescript中创建一个登录表单。但setEmail方法不接受该值。它表示“string”类型的参数不能分配给“SetStateAction”类型的参数。我该怎么解决它？

Answer 1

使用空字符串初始化useState将解决此问题。

useState可以根据您的initialState推断类型，这就是为什么使用空字符串初始化可以解决您的问题。

没有缩写的useState将是未定义的，因此您的类型和状态是未定义的。

如果您希望您的状态具有更复杂的类型，您需要传递具有定义类型的首字母State：

const initialState: TYPE = {
  // ...
};
const [state, setState] = useState(initialState);

或

将类型传递给useState，而不将类型设置为初始状态，如：useState

Answer 2

如果没有任何初始参数，email和setEmail的类型将是未定义的。

const [email, setEmail]: [undefined, (value: ((prevState: undefined) => undefined) | undefined) => void] = useState();

所以第一步是通过使用useState（"）或者更好的useState来强制电子邮件成为字符串

Answer 3

可以为其设置字符串类型

明确的方式：

const [email, setEmail] = useState<string>('')

或隐含方式：

const [email, setEmail] = useState('')

或者如果要设置数字类型

const [inputNumber, setInputNumber] = useState<number>(0);

然后在jsx中，这样做

<input
  type="number"
  value={inputNumber}
  onChange={(val) => {
    //Some ways to do this
    setInputNumber(Number(val.target.value));
    setInputNumber(+val.target.value);
    setInputNumber(parseInt(val.target.value,0));
  }}
/>

查看更多示例