Question

在一个页面上我有两个组件。一个组件从redux中的api set获取值，兄弟组件需要访问该状态。但兄弟组件从未调用mapStateToProps函数。

在歌曲节点的redux中获取数据的代码：

Songs.propTypes = {
topTrendingSongs: PropTypes.object,
song: PropTypes.object,
getHomeTopTrendingSongs: PropTypes.func.isRequired,
getUrls: PropTypes.func.isRequired,
getSong: PropTypes.func.isRequired
}

function mapStateToProps(state) {    
        console.log('Type IS : ', typeof state.songsReducer.song_one);
return {
    data: state.homeReducer.topTrendingSongs,
    song: state.songsReducer.song
}
}

export default connect(mapStateToProps, { getUrls, getHomeTopTrendingSongs, getSong })(Songs);

从未在兄弟组件中调用以下调用：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import playerIcon from '../img/playerIcon.svg';
import Pause from '../img/pause.svg';

import { connect } from 'react-redux';

export class Player extends Component {
 constructor(props) {
 super(props);

  this.state = {
   player: false,
   cSong: JSON.parse(localStorage.getItem('CurrentSong'))
   }
 }
 componentDidMount() {
   console.log('current song data', this.props.song);        
 }


  render() {
    return (
    <div id="min-player" className="min-player">        
      <video id="video"></video>
    </div>
   );
  }
}

 function mapStateToPropss(state) {
 console.log('all state', state);
 return {
  song: state.songsReducer.song
}
}

export default connect(mapStateToPropss)(Player);

Answer 1

我认为问题在于您正在通过声明（export class Player extends Component）导出课程，并且您再次使用export default使用react-redux的连接功能。

因此，在你的歌曲组件中，你可能会用大括号导入它，这会导入类，但不会导入包含connect函数的类。如果你导入没有大括号，它会导入＆＃34;默认＆＃34;出口。

你应该从歌曲组件中的导入中删除花括号，也可以删除＆＃34; export＆＃34;如果您总是要使用redux连接组件，请从您的班级声明中获取。

从来没有调用兄弟组件中的Redux？

1 个答案: