[英]Undefined parameter in react component
I have a navbar component with a simulated login that brings me the user email from a modal but when I send an attribute to my signinmenu component the emails shows as undefined. 我有一个带有模拟登录名的导航栏组件,它使我从模式中获取用户电子邮件,但是当我向signinmenu组件发送属性时,电子邮件显示为未定义。
I also send a signout function and this is working but thje string email appears as undefined 我还发送了签出功能,该功能正常运行,但字符串电子邮件显示为未定义
navbar component 导航栏组件
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>
);
}
}
SignInMenu component SignInMenu组件
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
This is a case typo - you're passing the prop as currentUser
in the parent component, and receiving it as currentuser
in the child. 这是一个错别字-您在父组件中将prop作为
currentUser
传递,而在子组件中将其作为currentuser
接收。 You need 你需要
<SignedInMenu currentuser={auth.currentUser} signOut={this.handleSignOut} />
It's tricky to avoid these sorts of problems, but using React PropTypes can help in some circumstances, you could consider adding them to your project. 避免这类问题很棘手,但是使用React PropTypes在某些情况下会有所帮助,您可以考虑将其添加到项目中。
SignedInMenu is a functional component and all its props contains in first argument. SignedInMenu是一个功能组件,其所有道具都包含在第一个参数中。 so you need to use it like this:
所以您需要像这样使用它:
SignedInMenu = (props) => {
return <h1>Hello, {props.name}</h1>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.