在对象类型错误中反应打字稿 useState 字符串

时间:2021-07-04 10:59:00

标签: reactjs typescript types

各位大神开发者朋友们

我有一个类型错误问题

抱歉更新我的问题

输入

interface IInfo {
  name: string;
  password: string;
}

useState

const [info, setInfo] = useState<IInfo>({
    name: '',
    password: '',
  });

错误代码

useEffect(() => {
    setInfo({ name: text }); <- error
    console.log(info);
  }, [text]);

错误信息

Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.

使用输入

import React, { useState, useCallback } from 'react';

export default () => {
  const [text, setText] = useState<string>();


  const getText = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const { value, placeholder } = e.target;
      setText(value);
    },
    [text],
  );
  return { text, getText};
};

为什么名称是错误的?

我知道问题在于类型定义

如何定义 useState 类型?

1 个答案:

答案 0 :(得分:0)

假设您始终希望该对象具有 namepassword 属性,那么您的类型定义就很好。

您更新的问题在于您只向 name 提供 name,而不是 passwordsetInfo。与 setState 组件中的 class 不同,您从 useState 获得的 setter 不接受部分更新。

如果您想分别更新 namepassword,您(至少)有两个选择:

  1. 保留您当前的状态成员并使用状态设置器的回调形式并在更新中包含当前的 password

    setInfo(({password}) => ({ name: text, password }));
    
  2. 使用两个单独的状态成员:

    const [name, setName] = useState("");
    const [password, setPassword] = useState("");
    

    然后使用 setNamesetPassword