0

I'm creating a Search input that uses lodash debounce to delay the requests when typing.

constructor(props) {
    super(props);
    this.state = {
      query: ""
    };
    this.debouncedFetchSearchList = debounce(this.fetchSearchList, 500);
  }

These are the functions I use to fetch the list:

fetchSearchList = (query: string) => {
    if (query.length >= 3) {
      this.props.setSearchList(query);
    }
  };

  updateQuery = (id: string, value: string) => {
    const query = value;
    this.setState({
      query: query
    });
    this.debouncedFetchSearchList(query);
  };

JSX:

<TextInput
          type="text"
          id="search-items"
          onChange={this.updateQuery}
          label={I18n.search}
          placeholder={I18n.search}
          className="search-items"
        />

When I type using this setup I get the error: "Uncaught TypeError: _this.debouncedFetchSearchList is not a function"

If I call console.log(this) I can see that the function is there and it's value is a lodash wrapper.

Am I missing something obvious?

isherwood
  • 58,414
  • 16
  • 114
  • 157
NeedsHelp
  • 427
  • 1
  • 7
  • 24
  • 1
    No, you don't miss anything. The code you posted cannot explain the problem. Consider providing a way to replicate it. – Estus Flask Jan 25 '19 at 16:43
  • this question should be deleted or closed. It was a typographical error, which does not help others. – zfrisch Jan 25 '19 at 16:56

1 Answers1

1

So it was a silly mistake in the end.

I imported it incorrectly.

I had: import debounce from "lodash";

Should have been: import { debounce } from "lodash";

I presumed the import was okay previously as I presumed I'd get an error if it was wrong.

NeedsHelp
  • 427
  • 1
  • 7
  • 24