类型'Readonly<{}> & Readonly<{ children?: ReactNode; 上不存在属性'match' }>答案

【问题标题】：Property 'match' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>类型'Readonly<{}> & Readonly<{ children?: ReactNode; 上不存在属性'match' }>
【发布时间】：2020-01-24 10:01:06
【问题描述】：

所以我最近将一个 ReactJs 项目从 ES6 JavaScript 转换为 TypeScript，并且遇到了一波我必须解决的错误。发生的最终错误之一，我似乎无法为代码部分找到解决方法

async componentDidMount() {
    const { pokemonIndex } = this.props.match.params;

    // Urls for pokemon information
    const pokemonUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonIndex}/`;
    const pokemonSpeciesUrl = `https://pokeapi.co/api/v2/pokemon-species/${pokemonIndex}/`;

    // Get Pokemon Information
    const pokemonRes = await axios.get(pokemonUrl);

    const name = pokemonRes.data.name;
    const imageUrl = pokemonRes.data.sprites.front_default;

    let { hp, attack, defense, speed, specialAttack, specialDefense }: any = "";

    pokemonRes.data.stats.map(
      (stat: { [x: string]: any; stat: { name: any } }) => {
        switch (stat.stat.name) {
          case "hp":
            hp = stat["base_stat"];
            break;
          case "attack":
            attack = stat["base_stat"];
            break;
          case "defense":
            defense = stat["base_stat"];
            break;
          case "speed":
            speed = stat["base_stat"];
            break;
          case "special-attack":
            specialAttack = stat["base_stat"];
            break;
          case "special-defense":
            specialDefense = stat["base_stat"];
            break;
          default:
            break;
        }
      }
    );

更具体地说就行了

const { pokemonIndex } = this.props.match.params;

这是什么原因？

--编辑-------------- ----

下面的代码是我的 App.tsx 的代码，带有我使用过的路由

import React, { Component } from "react";
import "./App.css";
import NavBar from "./components/layout/NavBar";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Dashboard from "./components/layout/Dashboard";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Pokemon from "./components/pokemon/Pokemon";

class App extends Component {
  constructor() {
    super({});
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />
          <div className="container">
            <Switch>
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/pokemon/:pokemonIndex" component={Pokemon} />
              <Dashboard />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

【问题讨论】：

似乎它试图从 React 路由参数中获取 pokemonIndex 值。稍后这个 pokemonIndex 用于构建新的 URL，如您提供的源代码所示。
@SergeyM 你这是什么意思？我现在应该使用 TS 路由参数吗？
@SergeyM 我已经编辑了我的问题以显示我的路由
这能回答你的问题吗？ Property 'value' does not exist on type 'Readonly<{}>'

标签： javascript reactjs typescript

【解决方案1】：

type TRouteParams = {
    pokemonIndex: string; // since it route params
}

那么你可以使用这个类型来表示RouteComponentProps接口，它代表this.props.match.params

interface IPokemonPageProps extends RouteComponentProps<TRouteParams>, React.Props<TRouteParams> {
    ....
}

现在你应该可以像这样访问你的道具了：

const { pokemonIndex } = this.props.match.params;

【讨论】：