无法将对象添加到数组中，因为它不是react中的“never”类型

Question

我正在尝试以下代码： https://playcode.io/2047320

    import React, { useState } from 'react';

    export default function App() {
      const [example, setExample] = useState([]);
      const ButtonClick = () => {
        setExample([...example, { id: 'Hi', another: 12 }]);
      };
      return (
        <div className='App'>
          <button onClick={ButtonClick}>This is a button</button>
        </div>
      );
    }

现在我知道在操场上它不会显示任何错误，但是当我尝试完全相同的代码时，它会抛出此错误：Type '{ id: string;另一个：数字； }' 不可分配给类型 'never'.ts(2322)

当我使用setExample时，我真的不知道为什么，而且其他人似乎没有发生过这种情况，请帮忙！

我尝试在 useState 中初始化数组时放置一个可以工作的示例对象，但是现在我需要从数据库中获取这些对象，并且没有（至少明显的）方法来获取它们，而反应知道它们是相同的对象，所以我真的迷失了

Answer 1

const [example, setExample] = useState([]);

由于您没有在此处指定类型，因此打字稿需要猜测。它看到您使用数组初始化了状态，但不知道该数组应该包含什么，因此最好的猜测是

never[]

。但这并不是一个特别有用的类型，因为不可能向

never[]

添加任何内容。

相反，您需要指定它是什么类型的数组。

useState

是泛型，因此您可以在尖括号中提供类型：

const [example, setExample] = useState<{ id: string; another: number; }[]>([]);

Answer 2

您遇到的错误是使用带有空数组的 useState 时的常见 TypeScript 问题。当您使用空数组 (useState([])) 初始化状态时，TypeScript 无法推断数组中元素的类型。因此，它默认为 never[]，这意味着一个数组不能容纳任何值，甚至不能容纳 null 或未定义。

为你的对象定义一个接口，然后在你的 useState 钩子中使用这个接口：

import React, { useState } from 'react';

interface ExampleItem {
  id: string;
  another: number;
}

export default function App() {
  const [example, setExample] = useState<ExampleItem[]>([]);
  const ButtonClick = () => {
    setExample([...example, { id: 'Hi', another: 12 }]);
  };
  return (
    <div className='App'>
      <button onClick={ButtonClick}>This is a button</button>
    </div>
  );
}