How to resolve the content of this promise?-CodePudding

So i have the following filter component

<SelectSearchFilter
            name="search"
            labelKey="option"
            width="small"
            valueKey="value"
            options={[
              { option: "Publication Name", value: "name", exact: true },
              { option: "Publication ID", value: "id", exact: true },
              { option: "Publisher ID", value: "publisher", exact: true },
              { option: "ISSN", value: "issn", exact: true },
              {
                option: "Legacy FH Pub Code",
                value: "id",
                exact: true,
                customValue: getLegafyFhPubCode(null)
              }
            ]}
          />

It works but sometimes I need to do some preprocessing of the values in the back and not get the value directly from the input field. So I have created an option called customValue, to pass functions as values.

First issue is that , ideally I want to call customValue as a reference to the function, I dont want it to execute yet, im forced to put null as argument, but really i dont want to execute it yet.

This leads me to the selecsearfilter component

Specifically to this input

  onKeyDown={async event => {
    if (event.key === "Enter") {
      console.log("----------------ENTER-----------------")
      const values = await getOptionValue(selectValue, valueKey)
      console.log(selectValue) //[option: 'Publication name', value: 'name', exact: true] | [option: 'Legacy FH Pub Code', value: 'id', exact: true, customValue: Promise]
      let customValue = await selectValue.customValue(inputValue)
      console.log(customValue)
      updateFilter(name, {
        property: getOptionValue(selectValue, valueKey),
        text: customValue ? customValue : inputValue
      });
    }
  }}

And in the code above, take attention to the comment Usually when there is no custom value, I simply set the inputValue in text when updating the filter and im done.

The problem happens now that, if customValue prop is available (which is the case), I want to set the response of that promise as inputValue instead. But it comes as Promise , and i get

Uncaught (in promise) TypeError: selectValue.customValue is not a function
    at onKeyDown (SelectSearchFilter.tsx:108:1)

How can I resolve that promise? And how can I pass that function to the component without having to specify any argument like null?

CodePudding user response：

the error is happening because your CustomValue is not a function as it says, but the result of the function getLegafyFhPubCode(null) you should pass the function without call in it getLegafyFhPubCode or you can use an arrow function () => getLegafyFhPubCode(null)