React Router Dom 在转到特定路由时返回一个空白页面

Question

当我重定向到同级组件时，浏览器中的 URL 发生了变化，并返回了一个空白页面。

当我尝试直接通过 url 访问组件时，仍然会出现空白页。

Index.js（路由在这里定义）

import React, { Component } from "react";
import { render } from "react-dom";
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter, Route } from "react-router-dom";
import loginComponent from "./loginComponent";
import { AccountComponent } from "./AccountComponent";


class APP extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" exact component={loginComponent} />
                    <Route path="/GetAllAccounts" exact component={AccountComponent} />
                </div>
            </BrowserRouter>
        );
    }
}

render(
    <MuiThemeProvider>
        <APP />
    </MuiThemeProvider>,
    document.getElementById('root')
);

LoginComponent.js（发生重定向的地方，这里跳过了所有的html和验证，因为它没有引起任何问题。）

 Axios.post('http://localhost:49776/api/Home/DoLogin', model, headers)
            .then(result => {
                localStorage.setItem("accounts", result.data);
                console.log(result);
                console.log(result.data);
                this.props.history.push("/GetAllAccounts");
            });
export default withRouter(loginComponent);

所以在成功调用 Rest API 后，它会重定向到 GetAllAccounts。

帐户组件

import React from "react";
import { Table } from 'react-bootstrap';

export class AccountComponent extends React.Component {

构造函数（道具）{ 超级（道具） this.state = { 数据：[] } } 组件DidMount() { 警报（localStorage.getItem（“帐户”））； this.setState({ data: localStorage.getItem("accounts") }); };

    render() {
        return (
            <Table striped bordered condensed hover>
                <thead>
                    <tr>
                        <th></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>OwnerFirstName</th>
                        <th>OwnerLastName</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.data.map(item => {
                        return (
                            <tr>
                                <td>item.Id</td>
                                <td>item.Name</td>
                                <td>item.OwnerFirstName</td>
                                <td>item.OwnerLastName</td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        );
    }
}

事件 componentDidMount 中也没有警报。

在控制台显示数据未定义，我正在设置这样的数据

componentDidMount() {
        alert(localStorage.getItem("accounts"));
        this.setState({ data: localStorage.getItem("accounts") });
    }

我无法弄清楚这里出了什么问题。

Answer 1

你不能像这样直接访问data。如果您设置了一个名为data 的state 属性，则必须在render() 函数中使用this.state.data 访问它。

this.state.data.map(item => {
    ...
});

您可能面临的另一个问题是componentDidMount 函数在组件的第一次渲染后触发（请参阅React componentDidMount()），这意味着您将在创建之前访问render() 中的数据并使用map在一个未定义的值上。

我建议您使用componentWillMount() 或在constructor 中创建数据属性，如下所示：

constructor(props) {
    super(props);

    this.state = { data: [] };
}

Answer 2

我认为componentDidMount 没有触发是因为

1. 呈现方法中存在错误。您正在使用 data.map 并且您正在将数据设置在 this.state.data
2. 语句本身没有验证，因为在第一次渲染时该变量将没有值。 {this.state.data && data.map(..)} 之类的内容应该适合您的情况。

那么，为什么该方法没有触发？这可能是因为执行是顺序的，当它在您的data.map 语句中遇到错误时它会停止。修复这些错误，我想你会很高兴的。

Answer 3

你犯了一个很小的错误。 而不是这个：

    <Route path="/GetAllAccounts" exact component={AccountComponent} />

使用这个：

    <Route path="/GetAllAccounts" exact component={<AccountComponent/>} />