Question

假设我在以下行为中创建了一个函数：

export default function login(){
  function my_init (){
    // some initialization goes here or some logic
    dispatch(some_actions, response)
  };
  function check_func() {
    console.log("Inside check_func") ------> It is never get printed.. 
    this.my_init()
  }
}

现在我想在我的组件中调用此函数：

class Login extends Component{

    render() {
    const { login, actions } = this.props
    return (
      <div>
        <button onClick={actions.login.check_func}>Click to login</button>
      </div>
    )
  }
}

Login.propTypes = {
  login: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

我已将dispath和state映射到props。但是当我点击按钮时，我的动作没有被调用。

需要帮助。

Answer 1

问题在于：

export default function login(){
  function my_init (){
    // some initialization goes here or some logic
    dispatch(some_actions, response)
  };
  function check_func() {
    console.log("Inside check_func")
    this.my_init()
  }
}

JavaScript中的函数不是类。最重要的是，在其他函数内定义的函数是不自动暴露在父函数之外。为了访问它们，必须从外部函数返回它们。例如：

export default function login(){
  function my_init (){
    // some initialization goes here or some logic
    dispatch(some_actions, response)
  };
  function check_func() {
    console.log("Inside check_func")
    this.my_init()
  } 

  return { my_init, check_func }; 
}

然后要访问它，请使用外部函数的返回值：

<button onClick={actions.login().check_func}>Click to login</button>

但是，考虑到希望如何使用它，您可能只想使用方法导出对象：

export default {
  my_init (){
    // some initialization goes here or some logic
    dispatch(some_actions, response)
  },
  check_func() {
    console.log("Inside check_func")
    this.my_init()
  }
};

这将允许您以当前的方式引用该功能：

<button onClick={actions.login.check_func}>Click to login</button>

redux调用嵌套函数

1 个答案: