未调用React / Javascript函数

时间:2019-09-16 20:22:41

标签: reactjs

完全被困在这里。我有一个react组件,它将函数requestPatchAccount传递给子组件:

import React from 'react';
import { Formik, Field, Form } from 'formik';
...
import { requestPatchAccount } from '../../../modules/account/actions';

const EditCustomerForm = ({customer, handleSubmit}) => {

  return (
    <Container>
      <Formik
        render={ () => (
          <Form>
             ...
                <AccountPaymentDetails
                  currentUser={customer}
                  requestPatchAccount={requestPatchAccount}
                  onSubmit={handleSubmit}
                /> 

子组件看起来像这样:

const AccountPaymentDetails = ({
  currentUser,
  requestPatchAccount,
  ...
}) => {
  ...
  const setCCDetails = ccToken => {
    const payload = { ccToken }
    console.log(account_jwt);
    console.log(payload);
    requestPatchAccount(account_jwt, payload);
  };
  ...

两个console.log语句显示正确的信息。但是,requestPatchAccount从未被调用。 requestPatchAccount看起来像这样:

export const requestPatchAccount = (authToken, patches) => (
  dispatch,
  getState
) => {
  console.log('i am here');
  console.log(authToken);
  console.log(patches);
...
};

没有任何内容从requestPatchAccount内部登录到控制台。我试过不将其作为道具传递,而是从具有子组件的同一文件中导入,但是我看到了相同的行为。有人可以解释我在做什么错吗?

2 个答案:

答案 0 :(得分:3)

您似乎只在调用函数的第一部分,该函数返回具有其他两个参数的另一个函数

requestPatchAccount = (authToken, patches) => (dispatch,getState) => {}

您仅拨打requestPatchAccount(authToken, patches) 当您requestPatchAccount(account_jwt, payload)

您需要致电requestPatchAccount(authToken, patches)(dispatch,getState)

答案 1 :(得分:2)

您的函数requestPatchAccount的设置方式是在调用它时实际上返回一个函数。 Here可以看到实际效果。如果要将代码保留在设置中,则需要执行以下操作。

requestPatchAccount()()基本上会采用requestPatchAccount返回的函数并立即调用它。

当然,您需要根据需要传递每个函数所需的值。