时间戳

首页 > 解决方案 > 如何在reactJs中调用具有参数的箭头函数

reactjs - 如何在reactJs中调用具有参数的箭头函数

问题描述

作为 reactJs 的新手，努力理解如何调用具有参数的箭头函数。

我在 file1.js 中定义了这个函数

const fetchSavedFilters = ({ tenantId, id }) => {
    client.query({
      query: GET_SAVED_FILTER,
      variables: { tenantId: tenantId, id: id, },
      fetchPolicy: "network-only",
    }).then(
      resp => {
        console.log("Responce received for single savedFilter :", resp);
        return resp;
      }
    );
  };

我在 file2.js 中有一个表单，用户用户将单击提交按钮，并且 onSubmit 处理程序在 file1.js 中定义。

从 file2.js 提交按钮代码

<Col md={2}>
                    <Button type="submit" 
                    color="primary" 
                    disabled={loading}>
                      {intl.formatMessage({ id: "button.filter" })}
                    </Button>
                </Col>

来自 file1.js 的处理程序

<Formik
                    onSubmit={(values) => {
                      if(values.savedFilterIds.length > 0){
                        var fetchedFilters = fetchSavedFilters(tenantId, values.savedFilterIds[0]);
                        refetch({
                          search: initialValues,
                        });
                      }else{
                        refetch({
                          search: values,
                        });
                      }
                    }}

fetchSavedFilters(tenantId, id) 被调用，但参数未定义，这阻止了我尝试从 dynamoDB 获取记录。我不明白如何解决这个问题。

标签： reactjsapollo-clientformik

解决方案

您已经以解构方式定义了您的函数。

const fetchSavedFilters = ({ tenantId, id }) => {
  //...
}

以上意味着您期望单个对象作为参数，在对象内部具有属性tenantId和另一个属性id。

现在，当您调用上述函数时，您将需要使用具有上述两个属性的对象进行调用。您有 2 个选项来调用该函数，

  • 选项A
const parameter = { tenantId: 123, id: 456 };
fetchSavedFilters(parameter);
  • 选项 B
fetchSavedFilters({ tenantId: 123, id: 456 });

或者，将您的函数声明更新为非解构方式。

const fetchSavedFilters = (tenant, id) => {
  //...
}

请注意花括号已被删除。现在这个函数需要 2 个参数，第一个参数命名，tenant而另一个参数命名id，然后您可以通过传入两个参数来调用该函数

推荐阅读