javascript - TypeScript: Egenskapen 'data' finns inte på typen '{ children?: ReactNode; }'. ts(2339)

Fråga

Jag arbetar på ett litet projekt med BlitzJS. Jag hämtar vissa data men jag får hela tiden detta Typescript-problem:

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

Jag antar att det är något med Typescript-typer men jag arbetar inte så mycket med Typescript. Jag har svårt att hitta en lösning.

Kan du vara snäll och hjälpa mig med lite vägledning här.

Tack!

Lösning

Tack vare Ajay löste jag problemet!

Här är ett fungerande exempel:

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

Svar #1

Typescript visar fel eftersom du inte hade förklarat någon typ. Du kan skapa din typ med

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

interface PropType { 
  data: CoinType[];
}

När du har skapat typer, då

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>
  )
}

Jag hoppas att det skulle fungera korrekt :-)