我剛剛將一些代碼從一個專案復制到另一個專案，并且 console.log("this is authenticated: " authenticated) 回傳 undefined 雖然我可以看到身份驗證為 true - 在 redux 狀態（當我在本地主機單擊右鍵單擊檢查然后轉到 redux 然后狀態。）
?
這可能是我的 react 或 redux 版本的問題嗎？
import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import Proptypes from "prop-types";
import MyButton from "./util/MyButton";
import { logoutUser } from "./redux/actions/userActions";
import { getConversations } from "./redux/actions/dataActions";
//icons
import KeyboardReturn from "@material-ui/icons/KeyboardReturn";
///npm install @material-ui/core
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import { auth } from "./firebase";
export class Navbar extends Component {
render() {
const { authenticated } = this.props;
console.log("this is authenticated: " authenticated);
const { user } = this.props;
return (
<AppBar>
<Toolbar className="nav-container">
{authenticated ? (
<Fragment>
<Link to="/login">
<MyButton
tip="Logout"
onClick={this.handleLogout}
>
<KeyboardReturn color="primary" />
</MyButton>
</Link>
</Fragment>
) : (
<Fragment>
<Button
color="inherit"
component={Link}
to="/login"
onClick={this.handleLogout}
>
{" "}
Login
</Button>
<Button
color="inherit"
component={Link}
to="/signup"
>
{" "}
SignUp
</Button>
</Fragment>
)}
</Toolbar>
</AppBar>
);
}
}
const mapStateToProps = state => ({
authenticated: state.user.authenticated,
user: state.user,
conversations: state.data
});
const mapActionsToProps = {
getConversations,
logoutUser
};
export default connect(mapStateToProps, mapActionsToProps)(Navbar);
uj5u.com熱心網友回復：
您很可能匯入了錯誤的組件
import {NavBar} from "../file"
它匯入命名組件（在您的情況下為未連接的組件）。
相反，你應該使用
import NavBar from "../file"
匯入default組件（連接組件，在您的情況下）
在功能部件的作業原理的原因是因為redux使用context內部的組件的狀態連接到redux存盤。因此，您不需要兩個匯出，匯出的組件將始終連接在一起。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368192.html