Question

看起来我应该能够通过通常命名的mapDispatchToProps函数将我的调度处理函数映射到连接组件的道具（在我的示例列表中）。在我的List组件中，我很困惑为什么this.props.a未定义？

ListContainer.jsx

const mapStateToProps = state => {
  return {
    list: state.list
  }
}

const mapDispatchToProps = dispatch => {
  return  {
    a: () => {}  //simple function just for testing

    //onDelete: (id) => {
    //  dispatch(actionCreators.delete(id));
    //}

  }
}

const ListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

module.exports = ListContainer;

List.jsx

module.exports = class List extends Component {

  render() {
    let list = this.props.list; //the list is on props as expected
    alert(JSON.stringify(this.props)); //function a is not on props
    ...
    return ...
  }

}

版本：“react”：“^ 16.0.0”，“react-redux”：“^ 5.0.6”，“redux”：“^ 3.7.2”，

Answer 1

@Prakash Sharma是正确的..您没有将函数称为props ..

//应该发送“ a”

    this.props.a();

    const mapStateToProps = state => {
      return {
        list: state.list
      }
    }

    const mapDispatchToProps = dispatch => {
      return  {
        a: () => {}  //simple function just for testing

        //onDelete: (id) => {
        //  dispatch(actionCreators.delete(id));
        //}

      }
    }

const ListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

module.exports = ListContainer;

Answer 2

a：（）=> {}

如果您的函数不返回任何内容，则javascript默认情况下将返回“未定义”

react-redux mapDispatchToProps函数在连接的组件上未定义

2 个答案: