Question

我正在一个项目上，在将用户发送到仪表板页面后，我必须登录，我必须将数据从一个页面传递到另一页面，我必须出错。我可以使用React开发人员工具查看数据，但是当我尝试显示我时出现错误“ TypeError：无法读取未定义的属性'state'”

---登录-

 handleLogin = () => {
        axios.defaults.withCredentials = true;
        let username = document.getElementById('username').value;
        let password = document.getElementById('password').value;
        const querystring = require('querystring');
        axios.post('url', querystring.stringify({
            username: username, //gave the values directly for testing
            password: password,
        }))
            .then((res) => {
                console.log(res)
                if (res.data.hasError === false) {
                    let user = res.data.result.name;     
                    this.props.history.push({
                        pathname: "/",
                       state:{
                            key:user
                       }
                    })

                } 

            }).catch((error) => {
        })
    };

---标题---

    class UserHeader extends Component {
        render() {
            return (  
<span>
       {this.props.location.state.key}
 </span>
            );
        }
    }
    export default UserHeader;

--- index.js -----

const app = (
    <BrowserRouter>
        <Switch>     
            <Route path="/login" component={Login}/>   
            <Route  path="/" component={App}/>   
        </Switch>
    </BrowserRouter>
)

ReactDOM.render(app, document.getElementById('root'));

TypeError：无法读取未定义的属性“状态”

在标题页

Answer 1

您可以在组件外部使用历史记录方法。首先，npm安装历史记录并创建一个history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

在header.js中，导入history.js并使用

  <span>{history.location.state.key}</span>

Answer 2

似乎您正在尝试从常规道具获得状态，但是您应该从路线道具获得状态。这是一个在我的项目中如何工作的示例：

    <Switch>
      <Route path="/" exact render={(routeProps) => ( <BooksWrapper books={this.props.books} /> )} />
      <Route path="/edit-book" render={(routeProps) => (
         <EditBook bookInfo={routeProps.location.state.bookInfo} />
      )} />
   </Switch>

然后我像普通道具一样得到它们。

在React中将数据传递到重定向内的页面，但在读取数据时出错，如何降低？

2 个答案: