Question

我正在尝试使用以下游戏数组设置初始状态：

import React from 'react'
import GameList from './GameList'

type GameType =  {
    key : number,
    team1 : string,
    team2 : string
}

interface AppState {
  games: GameType[]
}

class App extends React.Component<{}, AppState {

  constructor(props : {}) {
    super(props)
    this.state = {
      games : [{"key" : 1, "team1" : "AAA", "team2" : "BBB"},
               {"key" : 2, "team1" : "CCC", "team2" : "DDD"}]
      }
  }

  render() {
    return (
      <div className="app">
        <div className="container mt-4">
          <GameList games = {this.state.games} />
        </div>
      </div>
    )
  } 
}

export default App;

当我将此状态发送到GameList组件时，它会给我：

Type '{ games: GameType[]; }' is not assignable to type 'IntrinsicAttributes & GameType[]'. Property 'games' does not exist on type 'IntrinsicAttributes & GameType[]

正确的方法是什么？

Answer 1

添加一个描述完整应用状态的界面（或根据需要键入），并将其用作泛型的第二个参数。

interface AppState {
  games: GameType[]
}

class App extends React.Component<{}, AppState> {

设置初始状态数组

1 个答案: