this.context.PropTypes未定义

Question

我正在上大学的课程。在听完讲座之后，我遇到了这个问题，我似乎无法弄清楚。

这是我的代码：

import React from 'react';
import { getFunName } from '../helpers';

class StorePicker extends React.Component {

    goToStore(event) {
        event.preventDefault();
        console.log("provoked");
    const storeId = this.storeInput.value;
    console.log(`going to /store/${storeId}`)
        this.context.PropTypes.transitionTo(`/store/${storeId}`);
    }

    render() {
        return (
            <form className="store-selector" onSubmit={(e) => this.goToStore(e)}>
                <h2> Please Enter A Store </h2>
                <input type="text" required placeholder="Store Name" 
                defaultValue={getFunName()} ref={ (input) => {this.storeInput = input}} /> 
                <button type="submit"> Visit Store </button>            
            </form>
        )

    }   
}

StorePicker.contextTypes = {
router: React.PropTypes.object 
}

export default StorePicker;

Answer 1

首先导入道具类型

import PropTypes from 'prop-types';

然后使用历史记录重定向

this.props.history.push(`store/${storeId}`);

和您的路由器

router: PropTypes.object

Answer 2

React.PropTypes has been deprecated. So you have to install [prop-types][1]

图书馆。并像这样修改您的代码：

import React from 'react';
import { getFunName } from '../helpers';
import PropTypes from 'prop-types';

class StorePicker extends React.Component {

    goToStore(event) {
        event.preventDefault();
        console.log("provoked");
    const storeId = this.storeInput.value;
    console.log(`going to /store/${storeId}`)
        this.props.history.push(`store/${storeId}`);
    }

    render() {
        return (
            <form className="store-selector" onSubmit={(e) => this.goToStore(e)}>
                <h2> Please Enter A Store </h2>
                <input type="text" required placeholder="Store Name" 
                defaultValue={getFunName()} ref={ (input) => {this.storeInput = input}} /> 
                <button type="submit"> Visit Store </button>            
            </form>
        )

    }   
}

StorePicker.contextTypes = {
router: PropTypes.object 
}

export default StorePicker;

希望有帮助。如有疑问，请随时