reactjs - React/Typescript Egenskapen 'ID' finns inte på typen 'never'.ts(2339)

Jag har den här React/Typescript-sidan:

SpelareSida.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;

Jag får detta fel: Property 'ID' does not exist on type 'never'.ts(2339) på varje rad som har data.ID eller data.whatever.

Varför skulle de värdena aldrig användas eller alltid vara null? Jag använder nästan identisk kod i ett par andra appar, så jag är inte säker på vad som är annorlunda i den här situationen. Tack på förhand.

Svar #1

Du behöver lägga till typ för playersData när du deklarerar det.

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

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