javascript - 传递一个带有参数的函数

Question

我有一个通用表单，我想处理用户输入并保存数据。但由于端点和用户类型不同，我应该使用另一个类将保存函数传递给它。这里我有我的保存功能:

const save = async ({ data, props }) => {
  const { match: { params: { userkey } } } = props;
  const { name, selected } = data;
  await rest.post(
    '/v1/distributor/role',
    { key: name, permissions: selected },
    {
      'x-distributor-key': userkey,
    },
  );
};

export default compose(withProps({ save, getPermissions }))(NewRoles);

使用 userRole 来自另一个文件，并创建一个表单并通过在表单中​​提交来保存功能:

render() {
    const { save } = this.props;
    const { permissions } = this.state;
    console.log(this.props);
    return (
      <div className="col-md-4">
        <Form
          submit={save({ data: this.state, props: this.props })}
          change={this.change}
          nameChange={this.nameChange}
          permissions={permissions}
        />
      </div>
    );
  }
}

这里我将保存函数传递给表单。并期望在提交时单击保存函数，并使用 data 和 props 参数触发。但根据日志，保存函数没有以函数风格传递给 Form，它传递了一个 promise ，似乎之前已触发:

submit={save({ data: this.state, props: this.props })}

如何传递保存函数以使用该参数提交

Answer 1

您没有传递函数。实际上，您正在调用该函数，这意味着您正在将该函数的返回值(即 Promise)传递给 submit 属性。因此，改为传递一个函数。改变

submit={save({ data: this.state, props: this.props })}

到

submit={() => save({ data: this.state, props: this.props })}