reactjs - React/Typescript 属性 'ID' 不存在于类型'never'.ts(2339)

Question

我有这个 React/Typescript 页面：

玩家页面.tsx

import React, { useState, useEffect } from 'react';
import { Page } from './Page';
import { PageTitle } from './PageTitle';
import { Button, Card } from 'react-bootstrap';

function PlayersPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [playersData, setPlayersData] = useState([]);

  //Fetch all players from database
  useEffect(() => {
    //setIsLoading(true);
    fetch('http://localhost:44326/api/Players')
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
      })
      .then((data) => setPlayersData(data));
    //.then(setIsLoading(false));
  }, []);

  return (
    <Page>
      <div style={{ padding: 20 }}>
        <PageTitle>Toons</PageTitle>
      </div>

      <div>
        {playersData.map((data) => (
          <div key={data.ID}>
            <Card>
              <Card.Title>{data.ID}</Card.Title>
              <Card.Text>{data.Handle}</Card.Text>
              <Card.Body>
                <div className="lables">
                  <Card.Text>Role</Card.Text>
                </div>
                <div className="lables">
                  <Card.Text>{data.Role}</Card.Text>
                </div>
                <Button variant="primary">Work</Button>
              </Card.Body>
            </Card>
            <br></br>
          </div>
        ))}
      </div>
    </Page>
  );
}

export default PlayersPage;

我收到此错误：Property 'ID' does not exist on type 'never'.ts(2339)在具有data.ID或的每一行上data.whatever。

为什么这些值永远不会被使用或总是为空？我在其他几个应用程序中使用几乎相同的代码，所以我不确定这种情况有什么不同。提前致谢。

标签： reactjstypescript

Answer 1

您需要playersData在 decalre 时添加类型。

interface DataType {
  ID: string;
  Handle: string;
  Role: string;
}

const [playersData, setPlayersData] = useState<Array<DataType>>([]);