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

Question

我有一个父组件 Course 可以从 redux 获取状态并且我可以成功注销它：

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 获取 props:

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 访问状态。

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"

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

React Redux: Why is this nested component not receiving props from redux state?

reactjs

redux

react-redux