ReactJS TS，属性 'match' 在类型 'Readonly<{children?:ReactNode}> & Readonly' 上不存在

Question

我正在尝试输入组件的属性并同时使用 URL 参数。我收到以下错误:

Property 'match' does not exist on type 'Readonly<{children?:ReactNode}> & Readonly'

这是我的一些代码:

import Api from '../../api/Api';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

export class MyComponent extends React.Component<MyProps, MyState> {

    constructor(props: MyProps) {
        super(props);
        this.state = {
            someString: this.props.match.params.someString,//<-- Error is here on this line
            loading: true
        }
    }

    componentDidMount() {
        this.props.api.getSomeInfo(this.state.someString, this.callback)
    }

    callback() {
        let interval = setInterval(function () {
            this.setState({loading: false});
            clearInterval(interval)
        }, 3000);
    }

    render() {
        return (
            <div>
                <p>{this.someString}</p>
            </div>
        );
    }
}

如你所见，我正在尝试做的是:

1- 转到:

http://localhost:8080/someStrings/:someString

2- 在我的组件的构造函数中获取 :someString 的值并存储在状态中

3- 在我的状态下使用 someString 的值，以便能够将它作为参数传递给我的 API 模块来执行操作

4- 在 API 中执行回调时，我删除了加载动画

我的问题基本上是，我如何声明我的 MyProps 才能实现这一点？

Answer 1

这是类型定义中的一个悬而未决的问题。 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355

解决方法

import { RouteProps } from 'react-router';
import React from 'react';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

class MyComponent extends React.Component<Props & RouteProps, State> // Pay attention here.
{
  // your code...
}

引用:https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355#issuecomment-336022780