const { authenticated } = this.props 未定义，但我可以在 redux 中清楚地看到它

Question

我刚刚将一些代码从一个项目复制到另一个项目，并且 console.log("this is authenticated: " + authenticated) 返回 undefined 尽管我可以看到 authenticated 为 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);

Answer 1

背景

当我说 named 和 default exports/imports 时，我指的是 es-module exports and es-module imports.

为简化上述文章的内容，将两者视为：

named 导出为 objects，其中包含提供给它的所有命名空间。例如，export const a; export const b; 将生成一个对象 {a, b}，其他模块可以通过 import {a,b} from './file' 或其他变体访问该对象。
default 导出只是包含 access modifier default 的 named 导出。换句话说，它只是语法糖，允许您直接导入 default object 而无需解构，还提供了重命名对象的能力。例如 export default ReactInner 将允许您 import React from "react" 而不会出现任何错误。但是，请注意 ReactInner === React.

回答

您很可能导入了错误的组件

import {NavBar} from "../file"

导入命名组件（未连接的组件，在您的例子中）。

相反，您应该使用

import NavBar from "../file"

导入 default 组件（连接的组件，在你的例子中）

功能组件工作的原因是因为 redux 在内部使用 context 将组件的状态连接到 redux 存储。因此，您不需要两次导出，导出的组件将始终连接。

const { authenticated } = this.props 未定义，但我可以在 redux 中清楚地看到它

const { authenticated } = this.props is undefined though I can clearly see it in redux

reactjs

redux

背景

回答