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;

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

為什么這些值永遠不會被使用或者總是 null？ 我在其他幾個應用程序中使用了幾乎相同的代碼，所以我不確定這種情況有什么不同。 提前致謝。

Answer 1

您需要在貼花時為playersData添加類型。

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

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