Javascript react组件中未定义的参数
我有一个模拟登录的navbar组件,它从一个模式向我发送用户电子邮件,但当我向signinmenu组件发送属性时,电子邮件显示为未定义 我还发送了一个注销功能,这是工作,但字符串电子邮件显示为未定义 导航栏组件Javascript react组件中未定义的参数,javascript,reactjs,Javascript,Reactjs,我有一个模拟登录的navbar组件,它从一个模式向我发送用户电子邮件,但当我向signinmenu组件发送属性时,电子邮件显示为未定义 我还发送了一个注销功能,这是工作,但字符串电子邮件显示为未定义 导航栏组件 render() { const { auth } = this.props; const authenticated = auth.authenticated; return ( <Menu inverted fixed="top">
render() {
const { auth } = this.props;
const authenticated = auth.authenticated;
return (
<Menu inverted fixed="top">
<Container>
<Menu.Item as={Link} to="/" header>
<img src="/assets/images/logo.png" alt="logo" />
Re-vents
</Menu.Item>
<Menu.Item as={NavLink} to="/events" name="Events" />
<Menu.Item as={NavLink} to="/test" name="Test" />
{authenticated &&
<Menu.Item as={NavLink} to="/people" name="People" />}
{authenticated &&
<Menu.Item>
<Button
as={Link}
to="/createEvent"
floated="right"
positive
inverted
content="Create Event"
/>
</Menu.Item>}
{authenticated ? (
<SignedInMenu currentUser={auth.currentUser} signOut={this.handleSignOut} />
) : (
<SignedOutMenu signIn={this.handleSignIn} register={this.handleRegister} />
)}
</Container>
</Menu>
);
}
}
import React from 'react';
import { Menu, Image, Dropdown } from 'semantic-ui-react';
import { Link } from 'react-router-dom'
const SignedInMenu = ({signOut, currentuser}) => {
console.log(currentuser)
return (
<Menu.Item position="right">
<Image avatar spaced="right" src="/assets/images/user.png" />
<Dropdown pointing="top left" text={currentuser}>
<Dropdown.Menu>
<Dropdown.Item text="Create Event" icon="plus" />
<Dropdown.Item text="My Events" icon="calendar" />
<Dropdown.Item text="My Network" icon="users" />
<Dropdown.Item text="My Profile" icon="user" />
<Dropdown.Item as={Link} to='/settings' text="Settings" icon="settings" />
<Dropdown.Item onClick={signOut} text="Sign Out" icon="power" />
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
);
};
export default SignedInMenu;
I know the string is on the props but when I tried to show in the text attribute or console.log appears as undefined
render(){
const{auth}=this.props;
const authenticated=auth.authenticated;
返回(
出口
{已验证&&
}
{已验证&&
}
{认证(
) : (
)}
);
}
}
符号菜单组件
render() {
const { auth } = this.props;
const authenticated = auth.authenticated;
return (
<Menu inverted fixed="top">
<Container>
<Menu.Item as={Link} to="/" header>
<img src="/assets/images/logo.png" alt="logo" />
Re-vents
</Menu.Item>
<Menu.Item as={NavLink} to="/events" name="Events" />
<Menu.Item as={NavLink} to="/test" name="Test" />
{authenticated &&
<Menu.Item as={NavLink} to="/people" name="People" />}
{authenticated &&
<Menu.Item>
<Button
as={Link}
to="/createEvent"
floated="right"
positive
inverted
content="Create Event"
/>
</Menu.Item>}
{authenticated ? (
<SignedInMenu currentUser={auth.currentUser} signOut={this.handleSignOut} />
) : (
<SignedOutMenu signIn={this.handleSignIn} register={this.handleRegister} />
)}
</Container>
</Menu>
);
}
}
import React from 'react';
import { Menu, Image, Dropdown } from 'semantic-ui-react';
import { Link } from 'react-router-dom'
const SignedInMenu = ({signOut, currentuser}) => {
console.log(currentuser)
return (
<Menu.Item position="right">
<Image avatar spaced="right" src="/assets/images/user.png" />
<Dropdown pointing="top left" text={currentuser}>
<Dropdown.Menu>
<Dropdown.Item text="Create Event" icon="plus" />
<Dropdown.Item text="My Events" icon="calendar" />
<Dropdown.Item text="My Network" icon="users" />
<Dropdown.Item text="My Profile" icon="user" />
<Dropdown.Item as={Link} to='/settings' text="Settings" icon="settings" />
<Dropdown.Item onClick={signOut} text="Sign Out" icon="power" />
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
);
};
export default SignedInMenu;
I know the string is on the props but when I tried to show in the text attribute or console.log appears as undefined
从“React”导入React;
从“语义ui反应”导入{菜单、图像、下拉列表};
从“react router dom”导入{Link}
const signedMenu=({signOut,currentuser})=>{
console.log(当前用户)
返回(
);
};
导出默认签名菜单;
我知道字符串在道具上,但当我尝试在文本属性或console.log中显示时,显示为未定义
SignedMenu是一个功能组件,它的所有道具都包含在第一个参数中。所以你需要像这样使用它:
SignedInMenu = (props) => {
return <h1>Hello, {props.name}</h1>;
}
signedMenu=(道具)=>{
返回Hello,{props.name};
}
这是一个案例输入错误-您在父组件中以currentUser
的身份传递道具,在子组件中以currentUser
的身份接收道具。你需要
<SignedInMenu currentuser={auth.currentUser} signOut={this.handleSignOut} />
避免这些问题是很棘手的,但是在某些情况下,使用可以帮助,你可以考虑把它们添加到你的项目中。p> Sergio在他的组件声明中使用es6对象解构。您是wright,但最好将函数中的参数更改为currentUser,因为在其他地方使用camel case,这可能是我要做的。没问题。祝你的项目好运!