Как поддержать детализацию с интерфейсами типов в моем счетчике React Typescript?

Question

Я делаю простое приложение-счетчик для отслеживания цифровой карточной игры, в которую я играю. Я передаю реквизит от моего родителя моему ребенку, но реквизит не передается. Я думаю, что исправление - это просто поставить вопросительный знак (?) В конце свойств, которые я делаю в интерфейсе, но это не кажется оптимальным. Код работает, я просто повторяю данные в основном файле и файле компонента, что я не хочу делать.

Мой app.tsx:

import React from 'react'
import './App.css'
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <Counter
        deckName="elusive burn"
        winPercentage={123}
        losses={6}
        wins={7}
      />
    </div>
  )
}

export default App

Мой счетчик .tsx:

import React, { useState } from 'react'

// add a ? after the type name if you want any one of these to be optional, ex: wins?
interface Props {
  deckName: string
  wins: number
  losses: number
  winPercentage: number
}

const Counter: React.FC<Props> = () => {
  const [counter] = useState<Props>({
    deckName: '',
    wins: 0,
    losses: 0,
    winPercentage: 0,
  })

  return (
    <div>
      <p>Deck Name: {counter.deckName} </p>
      <p>wins: {counter.wins} </p>
      <p>losses: {counter.losses} </p>
      <p>Win Percentage: {counter.winPercentage}% </p>
    </div>
  )
}

export default Counter

Спасибо, что заглянули!

Answer 1

Почему вы используете useState здесь? Вы получаете всю необходимую информацию от props, поэтому берите ее прямо оттуда. Тогда я думаю, вы увидите, что нет избыточного кода.

// Counter.tsx
import React from 'react'

// add a ? after the type name if you want any one of these to be optional, ex: wins?
interface Props {
  deckName: string
  wins: number
  losses: number
  winPercentage: number
}

const Counter: React.FC<Props> = ({ deckName, wins, losses, winPercentage }: Props) => {
  return (
    <div>
      <p>Deck Name: {deckName} </p>
      <p>wins: {wins} </p>
      <p>losses: {losses} </p>
      <p>Win Percentage: {winPercentage}% </p>
    </div>
  )
}

export default Counter