React Redux：为什么这个嵌套组件没有从 redux state 接收道具？

Question

我有一个父组件Course能够从 redux 获取 state 并且我能够成功注销：

import React, { Component } from "react";
import { connect } from "react-redux";
import SchoolWrapper from "../SchoolWrapper";

export class Course extends Component {
  constructor(props) {
    super(props);
    console.log("Props in course", props);
  }
  render() {
    return (
      <>
        <SchoolWrapper>Wrapped component</SchoolWrapper>
      </>
    );
  }
}

const mapStateToProps = (state) => ({
  user: state.user,
});

export default connect(mapStateToProps)(Course);

嵌套在Course组件中的是另一个组件SchoolWrapper ，它能够从 redux state 获取道具：

import React, { Component } from "react";
import { connect } from "react-redux";
import { Nav } from "./Student/Nav";

export class SchoolWrapper extends Component {
  constructor(props) {
    super(props);
    console.log("SchoolWrapper props", props);
  }

  render() {
    return (
      <>
        <Nav />
      </>
    );
  }
}

const mapStateToProps = (state) => ({
  user: state.user,
});

export default connect(mapStateToProps)(SchoolWrapper);

但是，嵌套在此级别的Nav组件或任何其他组件无法从 redux 访问 state。

import React, { Component } from "react";


import { connect } from "react-redux";

export class Nav extends Component {
  constructor(props) {
    super(props);
    console.log("Nav props: ", props);
  }

  render() {
    return (
      <div>
        nav goes here...
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  user: state.user,
});

export default connect(mapStateToProps)(Nav);

我哪里错了？

Answer 1

我认为您导入 Nav 错误，在这里您使用的是“默认”导出：

export default connect(mapStateToProps)(Nav);

但是您尝试使用“命名”导入：

import { Nav } from "./Student/Nav";

Nav应作为“默认值”导入：

import Nav from "./Student/Nav"