Question

我有一个曾经工作过的redux代码，但是现在抛出“ this.props.watchSlidesData”不是函数错误。在ComponentWillMount（）中调用this.props.watchSlidesData（）;时，this.props.watchSlidesData（）中的this.props.watchSlidesData未定义。

我已确保所有定义的变量在reducer，action，types，mapToDispatchProps和mapToStateProps中正确拼写，并正确连接connect。必要的导入（例如connect和watchSlidesData）也在调用组件（在本例中为WelcomeScreen.js）中完成。请参见下面的代码段。

一些代码段：

//action (index.js)

import firebase from 'firebase';


import { 
    SLIDES_CHANGED,
} from './types';

export const watchSlidesData = () => {
  return (dispatch) => {
    firebase.database().ref("slides")
    .on("value", snapshot => 
    { 
        dispatch({ 
          type: SLIDES_CHANGED,
          payload: snapshot.val() });
    }, function(error) { console.log(error); });
  }
};

// WelcomeScreen.js snippet

import { connect } from "react-redux";
import { watchSlidesData } from '../store/actions/';

componentWillMount(){
    this.props.watchSlidesData();
}

const mapStateToProps = ({ appdata }) => {
  const {  slidesData } = appdata;
  return { 
    slidesData: slidesData,
  };
}

const mapDispatchToProps = (dispatch) => {
  return { 
    watchSlidesData: () => dispatch(watchSlidesData()),
    // actions: bindActionCreators({ watchSlidesData }, dispatch)
  };
}

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

我希望可以从firebase提取照片，并在WelcomeScreen上以幻灯片形式显示。在ComponentWillMount（）中调用this.props.watchSlidesData（）操作创建者应通过分派启动该获取。但是我遇到了错误（红色屏幕）：this.props.watchSlidesData不是函数，this.props.watchSlidesData未定义

Answer 1

您可以这样做：

// WelcomeScreen.js snippet

import { connect } from "react-redux";
import { watchSlidesData } from '../store/actions/';

componentWillMount(){
    this.props.watchSlidesData();
}

const mapStateToProps = ({ appdata }) => {
  const {  slidesData } = appdata;
  return { slidesData };
}


export default connect(mapStateToProps,{watchSlidesData})(WelcomeScreen);

行动创造者在this.props

1 个答案: