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。

AccountComponent

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

export class AccountComponent extends React.Component {

构造函数（道具）{ 超级（道具） this.state = {数据：[]} } componentDidMount（）{ alert（localStorage.getItem（“ accounts”））; 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 属性，则必须使用this.state.data函数中的render()来访问它。

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

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

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

constructor(props) {
    super(props);

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

Answer 2

我认为componentDidMount由于

而未触发

render方法出错。您正在使用data.map，并且正在this.state.data中设置数据
语句本身没有验证，因为在第一次渲染时，该变量将没有值。 {this.state.data && data.map(..)}之类的东西适合您。

那么，为什么该方法不触发？可能是因为执行是顺序执行，所以在您的data.map语句中遇到错误时会停止执行。解决这些错误，我认为您会很好。

Answer 3

您犯了一个非常小的错误。代替这个：

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

使用此：

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

转到特定路线时，React Router Dom返回空白页

3 个答案: