redux - Redux mapStateToProps() 在使用 Next.js 返回后不呈现

Question

我一直在努力弄清楚为什么render()不被调用 after mapStateToProps()。

目前，工作秩序是

getInitialProps-> mapStateToProps-> mapDispatchToProps-> constructor-> render-> componentDidMount(here dispatch with Redux)-> mapStateToProps-> 结束

就像您看到的顺序一样，应该在调度发生之后调用 render()，以便使用来自 Redux 的调度数据呈现页面。

有谁知道为什么？

页面/搜索/index.js

import { connect } from "react-redux";
import Container from "./container";
import { actionCreators as storeActions } from "lib/modules/stores";

const mapStateToProps = (state, ownProps) => {
  const { storeList } = state;
  return { storeList };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  const { searchTerm } = ownProps;
  return {
    searchByTerm: pageNum => {
      dispatch(storeActions.searchByTerm(searchTerm, pageNum));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Container);

页面/搜索/container.js

import Search from "./presenter";

class Index extends React.Component {
  static async getInitialProps(context) {
    const { searchTerm } = context.query;
    return {
      searchTerm
    };
  }

  state = {
    loading: true,
    offset: 0,
    page: 1,
    limit: 10,
    nlabel: ">>",
    plabel: "<<"
  };

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const { searchByTerm } = this.props;
    const { page } = this.state;
    searchByTerm(page);
  }

  render() {
    const { classes, storeList, goToSearch, searchTerm } = this.props;

    return (
      <Search
        {...this.state}
        storeList={storeList}
        searchTerm={searchTerm}
      />
    );
  }
}

export default Index;

标签： reduxnext.js