javascript - TypeScript:类型 'data' 上不存在属性 '{ children?: ReactNode; }' 。 TS(2339)

Question

问题

我正在使用 BlitzJS 开发一个小项目。我正在获取一些数据，但我不断收到此 Typescript 问题:

Property 'data' does not exist on type '{ children?: ReactNode; }'.ts(2339)

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"

export async function getServerSideProps() {
  const response = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=10&page=1&sparkline=false"
  )
  const data = await response.json()

  return {
    props: {
      data,
    },
  }
}

const MarketPage: BlitzPage = ({ data }) => { /////////// ERROR IS ON THIS LINE
  console.log(data)

  return (
    <div>
      <h1>This is Market Page</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Current Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <td>
                <p>{coin.name}</p>
              </td>
              <td>
                <p>{coin.current_price}</p>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

MarketPage.suppressFirstRenderFlicker = true
MarketPage.getLayout = (page) => <Layout>{page}</Layout>

export default MarketPage

我猜这是 Typescript 类型的东西，但我不怎么使用 Typescript。我很难找到解决方案。

请您在这里帮我一些指导。

谢谢!

解决方案

感谢 Ajay，我解决了这个问题!

这是工作示例:

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
import { Table, Th, Td } from "app/core/components/Table"

interface CoinType {
  id: string
  name: string
  current_price: string
}

interface PropType {
  data: CoinType[]
}

export async function getServerSideProps() {
  const response = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=10&page=1&sparkline=false"
  )
  const data = await response.json()

  return {
    props: {
      data,
    },
  }
}

const MarketPage: BlitzPage<PropType> = ({ data }) => {
  return (
    <div>
      <h1>This is Market Page</h1>

      <Table>
        <thead>
          <tr>
            <Th>Name</Th>
            <Th hasNumber>Current Price</Th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <Td>
                <p>{coin.name}</p>
              </Td>
              <Td hasNumber>
                <p>{coin.current_price}</p>
              </Td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  )
}

MarketPage.suppressFirstRenderFlicker = true
MarketPage.getLayout = (page) => <Layout>{page}</Layout>

export default MarketPage

Answer 1

Typescript 显示错误，因为您没有解释任何类型。您可以使用以下命令创建您的类型

interface CoinType {
  id: string;
  name: string;
  current_price: string;
} 

interface PropType { 
  data: CoinType[];
}

创建类型后，然后

const MarketPage: BlitzPage = ({ data }:PropType) => {
  console.log(data)

  return (
    <div>
      <h1>This is Market Page</h1>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Current Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((coin) => (
            <tr key={coin.id}>
              <td>
                <p>{coin.name}</p>
              </td>
              <td>
                <p>{coin.current_price}</p>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

我希望它能正常工作:-)