对如何使用TypeScript编写.map方法感到困惑

Question

我正在尝试了解如何将TypeScript添加到我的.map方法中，但此刻，我收到以下错误消息。我不太确定'never'关键字的含义是什么。

TS2339: Property 'fname' does not exist on type 'never'

我正在使用的代码是：

const [climbs, setClimbs] = useState([]);
...
useEffect(() => {
  async function data() {
    try {
      const getClimbs = await axios.get("http://localhost:4000/climbs");
      setClimbs(getClimbs.data);
    } catch (err) {}
  }
  data();
}, []);
...
<div className="list">
  {climbs.map(climb => {
    return (
      <>
        <div className="list-name">{climb.fname}</div>
        <div className="list-recent-climb">
          {climb.climb} - {climb.grade} - {climb.location}
        </div>
        <div className="list-date">{climb.date}</div>
      </>
    );
  })}
</div>
...

我还尝试在顶部添加一个类型对象，以查看是否可以清除所有内容。我是TypeScript的新手，所以尝试了解一下。

type Props = {
  fname: String,
  climb: String,
  grade: String,
  location: String,
  date: Date
}

Answer 1

这是因为您要使用默认为useState的空数组调用never[]。更改为：

React.useState<Props[]>([])