reactjs 从typescript中的一组字符串设置对象键的类型

91zkwejq 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(104)

我的React组件中有这样一段代码：

type TLang = 'tur' | 'eng';
  const [filterState, setFilterState] = useState<{
    [key in TLang]: string | null;
  }>(null);

  const inputChangeHadnler =
    (type: TLang): React.ChangeEventHandler<HTMLInputElement> =>
    (event) => {
      setFilterState({ [type]: event.target.value });
    };
 
  return <input onChange={inputChangeHadnler('tur')}></input>}

带有setFilterState的行声明了一个错误：
类型为“{ [x：字符串]：字符串;}"不能赋给类型为“SetStateAction〈{ tur：字符串;英文：字符串; }〉“。键入”{ [x：字符串]：字符串;}“缺少类型”{ tur：字符串;英文：字符串;}“：发动机车削（2345）
照我的理解，它说明filrerstate对象必须有两个属性：tur和eng，但我希望它只有一个键，tur或eng，来自TLang类型。
这里有没有办法说：useState<{[key in TLang]: string | null;}>(null);，该对象应该只有一个值：“转”还是“正”？
我唯一的想法只是说：useState<{ tur: string | null } | { eng: string | null} | null>(null)>，但我怀疑它的工作，如果我有更多的语言。

reactjs

来源：https://stackoverflow.com/questions/74763849/set-type-for-a-key-of-an-object-from-a-set-of-strings-in-typescript

2条答案

按热度按时间

jk9hmnmh1#

event.target通常可以是任何元素。在TypeScript中，使用.currentTarget可以使TypeScript知道所引用的元素肯定是处理程序所附加到的元素，而不是它的任何子元素-这将使它被推断为HTMLInputElement。
React通常在使用受控组件时工作得更好，TypeScript也是如此。请考虑让输入值的状态在输入中发生onChange变化。
inputChangeHadnler可能应该是inputChangeHandler（打字错误是编程中错误的常见来源--一旦看到它们就修复它们以减少混乱）

这里有没有办法说：useState〈{[关键字语言]：串|（空的）;对象应该只有一个值：“转”还是“正”？
您可以使用-{ tur: string | null } | { eng: string | null }-但要实现这种逻辑，您可能会考虑创建另一个使用该语言的状态。

const App = () => {
    const [inputValue, setInputValue] = useState('');
    const [lang, setLang] = useState<TLang>('tur');
    return <input value={inputValue} onChange={(e) => { setInputValue(e.currentTarget.value); }} />;
};

现在你有两个非常容易管理的字符串状态--输入值和语言。如果你需要在某处创建一个filterState对象，你现在可以根据需要从现有的状态中创建。

赞(0）回复(0）举报 2022-12-12

rks48beu2#

也许将状态类型定义为每个语言的可选类型会有所帮助？
它应该处理添加更多语言。
检查演示Codesanbox example

赞(0）回复(0）举报 2022-12-12