Блог

При запуске этого кода все компилируется, но когда я нажимаю на кнопку «Нажмите на меня», вместо маршрутизации на «formPage.js», он выдает ошибку «Ошибка типа: Не удается прочитать свойство «push» неопределенного». Как я должен решить эту проблему?

Когда я использую «www.google.com» это вместо того, чтобы formPage.js это также приводит меня к той же ошибке.

Есть ли способ решить эту проблему без необходимости преобразовывать весь мой код в функцию для использования useHistory()?

 import axios from 'axios';
import React, { Component } from 'react';

export default class Form extends Component {

    constructor(props) {
        super(props);
        this.state = {
            message: []
        };
        this.handleClick = this.handleClick.bind(this);
    }

    async getData() {
        await axios.get("https://...")
        .then((response) => {
            const convertString = JSON.parse(response.data.body);
            this.setState({message: convertString});
        })
    }

    componentDidMount() {
        this.getData();
    }

    handleClick() {
        this.props.history.push("/formPage.js");
    }

    render() {
        const obj = (this.state.message);
        const datamapping = Object.entries(this.state.message);
        return (
            <div>
                <div className="viewall">
                    <table class="table table-hover">
                        <thead>
                            <th scope="col">Click me</th>
                            <th scope="col">key1</th>
                            <th scope="col">key2</th>
                        </thead>
                        <tbody>
                            {obj.Items?.map((data, key) => {
                                return (
                                    <tr key={key}>
                                        <td>
                                            <button type="button" class="btn btn-primary" onClick={this.handleClick}>
                                                Click me
                                            </button>
                                        </td>
                                        <td>{data.key1}</td>
                                        <td>{data.key2}</td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}