Question

我是React Redux的新手。

我正试图从Traversy Media Youtube频道复制相同的教程 GitHub：https://github.com/bradtraversy/lead_manager_react_django

并遇到与此this.props.function相关的问题

我尝试阅读有关Stackoverflow的内容，但是我没有使用mapDispatchToProps，在尝试理解本教程时，我并不太了解

Music.js

export class Music extends Component {
  static propTypes = {
      musics: PropTypes.array.isRequired,
      getMusics: PropTypes.func.isRequired
  };

  componentDidMount() {
    console.log(this.props)
    this.props.getMusics();
  };}
const mapStateToProps = state => ({
  musics: state.musics.musics
});

export default connect(
  mapStateToProps, {getMusics}
)(Music);

我剥离了渲染部分，因为我还没有实现

types.js

export const GET_MUSICS = "GET_MUSICS"

actions.js

import axios from 'axios';

import {GET_MUSICS} from './types';

export const getMusics = () => dispatch => {
    axios.get('/api/musics/').then(res => {
        dispatch({type: GET_MUSICS, payload: res.data});
    }).catch(err=> console.log(err));
}

reducer musics.js

import {GET_MUSICS} from '../actions/types.js';

const initialState = {
    musics: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_MUSICS:
            return {
                ... state,
                musics: action.payload
            };
        default:
            return state;
    }
}

这将引发错误this.props.getMusics不是一个函数 console.log（props）返回空对象

Answer 1

您正在导出Music既是命名导出又是默认导出。确保使用默认导出，因为它已连接到存储。即这样做

import Music from "./Music"

不是这个

import {Music} from "./Music"

Answer 2

我认为这将有助于您尝试

import {bindActionCreators} from 'redux'

...

function mapDispatchToProps(state) {
    return {
        musics: state.musics.musics
    }
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({fetchMusics}, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Music)

Answer 3

请检查您可能未正确传递函数的父组件，还需要更多代码来显示父组件

this.props。***不是函数

3 个答案: