Javascript 使用MapStateTops提取数据

我有这个组件，我需要从我的Redux存储中获取一些数据。 但是，我看到它以一种稍微不同的方式传递了一些其他必需的数据。我关心的是如何在这种情况下使用MapStateTops并获取数据

下面是我需要从redux存储中提取数据的组件：

const NavBarScore = withStyles(navBarScoreStyles)(
  ({ classes, matchDetails }) => {
    // some opeartions on matchDetails
    return (
      <span className={classes.middleScoreContainer}>
        <span className={classes.teamName}>{scoreData.homeTeamName}</span>
        <span className={classes.teamName}>{scoreData.awayTeamName} </span>
      </span>
    );
  }
);

我尝试在另一个组件中执行类似的操作并访问它，但它没有显示任何数据。

---

我关心的是如何使用mapstatetoprops从这个组件中的redux获取数据。

为NavScore创建一个容器组件，比如NavScoreContainer，它将向redux发送事件，获取数据并将状态映射到props

例如：-

const mapStateToProps = (state, ownProps) => {
    return ({
        scores: state.scores
    })
}

const mapDispatchToProps = (dispatch, ownProps) => ({
    fetchScores: () => {
        dispatch(fetchScores());
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NavScore)

---

此处，分数将作为道具传递给组件，并可作为.props.scores访问。

如下声明组件：

const NavBarScore = ({ classes, matchDetails }) => {
    // some opeartions on matchDetails
    return (
      <span className={classes.middleScoreContainer}>
        <span className={classes.teamName}>{scoreData.homeTeamName}</span>
        <span className={classes.teamName}>{scoreData.awayTeamName} </span>
      </span>
    )
  }

当您导入它时，它将获取您需要的数据，或者如果您只需要在同一文件中使用它，则将其分配给新变量

const NavBarScoreWithData = withStyles(navBarScoreStyles)(connect(({ cricketFantasy: { matchDetails } }) => ({ matchDetails: cricketFantasyMatchDetails }))(NavBarScore))

---

这是假设您的全局状态中有

com.matchDetails

，否则您可以使用

connect（state=>state）对其进行检查和测试

好吧。这并不能回答问题。我想看看你在说什么容器组件。据我所知，代码中的第一个组件是hoc。connect和WithStyle都是hoc，包装另一个组件太多余了。

export default withStyles(navBarScoreStyles)(connect(({ cricketFantasy: { matchDetails } }) => ({ matchDetails: cricketFantasyMatchDetails }))(NavBarScore))

const NavBarScoreWithData = withStyles(navBarScoreStyles)(connect(({ cricketFantasy: { matchDetails } }) => ({ matchDetails: cricketFantasyMatchDetails }))(NavBarScore))