类型错误无法读取未定义的reactjs的属性“推送”

时间:2018-06-12 10:24:16

标签: reactjs react-router

这是一个索引页面。

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import {Router, Route, browserHistory} from "react-router";

import {EmployeeList} from "./employeeList";
import {EditForm} from "./edit";


class App extends React. Component{ 
    render(){
        return (
            <BrowserRouter history={browserHistory}>
                <switch>
                    <Route path={"/"} component={EmployeeList} />
                    <Route path={"edit/:id"} component={EditForm} />    
                </switch>   
            </BrowserRouter>
        );
    }
}

render(<App />, window.document.getElementById("app"));

这是来自此页面的员工页面。点击按钮后,我想要获取ID并需要传递给js页面,我需要使用此获取的id调用anthor api。

import React from "react";
import {browserHistory} from "react-router";
import { createHashHistory } from 'history';

export class EmployeeList extends React. Component {
    constructor(props) {
        super(props);
        this.state = { 
            students: [],
        }
        this.onNavigateEdit = this.onNavigateEdit.bind(this);
    };


    onNavigateEdit() {
        //alert(id);
        this.browserHistory.push("/edit");
     }


    componentDidMount() {
        fetch('https://api.myjson.com/bins/bz92u')
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({ students: responseJson.students })
            })
    }


    render() {

        const student = this.state.students.map((item, i) => (
            <tr>
                <td>{item.id}</td>
                <td>{item.fname}</td>
                <td>{item.lname}</td>
                <td>
                    <button className="btn btn-primary" onClick={this.onNavigateEdit}>
                        EDIT
                    </button>
                </td>
            </tr>
        ));
        return (
            <div>
                <table class="table table-dark table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Button</th>
                        </tr>
                    </thead>
                    {student}
                </table>
            </div>
        );

    }
}

这是一个编辑js页面。

import React from "react";
import { render } from "react-dom";

export class EditForm extends React. Component {
    constructor(props) {
        super(props);
        this.state = { 
            students: []
        }
    };


    render() {
        return (
            <div></div>
        );
    }
}

M获取类型错误是无法读取未定义的属性'push'。 因此需要使用白色路由器方法。

0 个答案:

没有答案