Reactjs 无法读取属性'；推动'；提交时未定义的属性
我正在尝试使用friebase实现搜索功能，但遇到一个错误，即无法读取未定义的属性push。它发生在我点击搜索按钮时，我应该被重定向到搜索结果组件，但什么都没有发生。非常感谢您的帮助！谢谢 NavBar.jsReactjs 无法读取属性'；推动'；提交时未定义的属性,reactjs,firebase,Reactjs,Firebase,我正在尝试使用friebase实现搜索功能，但遇到一个错误，即无法读取未定义的属性push。它发生在我点击搜索按钮时，我应该被重定向到搜索结果组件，但什么都没有发生。非常感谢您的帮助！谢谢 NavBar.js import React from "react"; import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, Button, Nav
import React from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Button,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
import { Redirect, Link } from "react-router-dom";
import Searchresults from "./searchresults";
import app from "../config/dev";
import { Route, withRouter } from "react-router";
export default class NavigatioBar extends React.Component {
constructor(props) {
super(props);
this.state = {
authenticated: false,
currentUser: null,
redirect: false,
email: "",
name: "",
isOpen: false
};
this.toggle = this.toggle.bind(this);
this.signout = this.signout.bind(this);
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
signout() {
app
.auth()
.signOut()
.then(user => {
this.setState({ redirect: true });
});
}
componentWillMount() {
app.auth().onAuthStateChanged(user => {
if (user) {
this.setState({
currentUser: user,
email: user.email,
authenticated: true
});
} else {
this.setState({
currentUser: null,
authenticated: false
});
}
});
}
handleSubmit = e => {
e.preventDefault();
this.props.history.push(`/champ/${this.state.name}`);
};
render() {
let content = null;
if (content !== null) {
<Searchresults name={this.state.name} />;
} else {
<p> h </p>;
}
let searchMake = ["Ahri", "Zed", "Malphite", "Talon", "Velkoz", "Jax"];
let names = searchMake.map((name, i) => {
return (
<option key={i} value={name}>
{name}
</option>
);
});
const { redirect } = this.state;
if (redirect) {
return <Redirect to="/signout" />;
}
const authenticated = this.state.authenticated;
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
            
<Link to="/">
<a className="navbar-brand" href="/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW4ZhCsXYeyhMYuaOZTGVq2VkeAW9gvDcgOfdPZ1B0WbYaBvR4" />
</a>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
Lin aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
<li className="nav-item active">
                    
<a className="nav-link" href="#">
<Link to="/">
Champs <span className="sr-only">(current)</span>
</Link>
</a>
          
</li>
{authenticated ? (
<li className="nav-item">
<a className="nav-link" onClick={this.signout}>
signout
</a>
</li>
) : (
<li className="nav-item">
    
<Link to="/login" className="nav-link">
{" "}
Login{" "}
</Link>{" "}
                    
<Link to="/signup" className="nav-link">
{" "}
signup{" "}
</Link>
</li>
)}
</ul>
<form
onSubmit={this.handleSubmit}
className="form-inline my-2 my-lg-0"
id="crap"
>
<div className="col-3">
<select
className="form-control"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
>
<option value="" disabled selected>
Champ
</option>
{names}
</select>
</div>
<div className="col-3">
<button type="submit" className="btn btn-success btn-block">
Search
</button>
</div>
</form>
</div>
{content}
</nav>
);
}
}
从“React”导入React；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
按钮
纳维坦，
导航链接，
不受控制的下降，
下拉开关，
下拉菜单，
下拉项
}从“反应带”；
从“react router dom”导入{Redirect，Link}；
从“/Searchresults”导入搜索结果；
从“./config/dev”导入应用程序；
从“react router”导入{Route，withRouter}；
导出默认类NavigationBar扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
认证：假，
当前用户：null，
重定向：false，
电邮：“，
姓名：“，
伊索彭：错
};
this.toggle=this.toggle.bind（this）；
this.signout=this.signout.bind（this）；
}
切换（）{
这是我的国家({
isOpen:！this.state.isOpen
});
}
签出（）{
应用程序
.auth（）
.signOut（）
。然后（用户=>{
this.setState（{redirect:true}）；
});
}
组件willmount（）{
app.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
这是我的国家({
当前用户：用户，
电子邮件：user.email，
真的吗
});
}否则{
这是我的国家({
当前用户：null，
认证：假
});
}
});
}
handleSubmit=e=>{
e、 预防默认值（）；
this.props.history.push（`/champ/${this.state.name}`）；
};
render（）{
让content=null；
如果（内容！==null）{
;
}否则{
h；
}
让searchMake=[“Ahri”、“Zed”、“Malphite”、“Talon”、“Velkoz”、“Jax”]；
让names=searchMake.map（（name，i）=>{
返回(
{name}
);
});
const{redirect}=this.state；
如果（重定向）{
返回；
}
const authenticated=this.state.authenticated；
返回(
-
{认证(
-
签到
) : (
-
{" "}
登录名{'}
{" "}
{" "}
注册{“}
)}
this.setState（{name:e.target.value}）}
>
钱普
{names}
搜寻
{content}
);
}
}
export default class NavigatioBar extends React.Component {
// ...
}
this.props.history.push(`/champ/${this.state.name}`);`
this.props.historythis.props.history.push(`/champ/${this.state.name}`);`