在 React TypeScript 中键入 useState 作为字符串数组

在 React TypeScript 中输入 useState 作为字符串数组

Type useState as Array of Strings in React TypeScript

要useState在 React 中将钩子键入为字符串数组，请使用钩子的泛型，例如const [names, setNames] = useState<string[]>([]). 状态变量可以初始化为空数组或字符串数组，并且只接受字符串值。

应用程序.tsx


import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们使用
泛型
来正确键入useState
挂钩，同时使用空数组初始化挂钩。

反应使用状态字符串数组打字稿

如果我们没有使用泛型，例如useState<string[]>([])在输入 hook 时，状态变量的类型将是never[]，换句话说，一个永远不会包含任何元素的数组。

即使将一个空字符串传递给数组，TypeScript 也能推断出状态变量的类型。

应用程序.tsx


import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState(['']);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

请注意，我们甚至不必使用泛型来键入状态变量。TypeScript 能够根据提供的初始值推断类型。

但是，最佳做法是始终显式键入挂钩，尤其是在处理数组和对象时。 useState

如果我们尝试向状态数组添加不同类型的值，我们会得到类型检查错误。

应用程序.tsx


import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  // ⛔️ Argument of type '(prevNames: string[]) => (string | number)[]' is not
  // assignable to parameter of type 'SetStateAction<string[]>'.
  setNames(prevNames => [...prevNames, 1000]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element.toUpperCase()}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

该示例显示了如何尝试将数字添加到类型为 as 的状态数组
string[]导致类型检查器出错。

–