Функция генератора внутри компонента

Question

У меня есть базовый компонент класса, и я хочу объявить внутри него функцию генератора для вызова API.Я не должен использовать fetch.then.Вот мой код

class SearchField extends React.Component {

  componentWillUnmount() {
    this.props.clearSearchState();
  }

  handleOnFocus() {
    function* focus(){
      yield call(request, 'POST', URL, BODY)
     }
  }

  handleOnBlur() {
    this.props.handleOnBlur();
  }

  render() {
    return (
      <div>
        <input
          id={this.props.searchFieldId}
          type="text"
          value={this.props.value || ''}
          placeholder={this.props.intl.formatMessage({ id: this.props.placeholder })}
          onChange={(e) => {
            this.props.handleOnChange(e.target.value);
          }}
          className="text"
          onFocus={this.props.handleOnFocus}
          onBlur={this.props.handleOnBlur}
        />
        <button
          className="clear"
          onClick={this.props.clearFieldValue}
          style={{ display: this.props.clearButtonVisible ? 'block' : 'none' }}
        />
      </div>
    );
  }
}

Возможно ли это сделать в моем компоненте?

Answer 1

Насколько я знаю, можно иметь (и вызывать) функции генератора в (из) React Component.Я думаю, что это должно работать, если вы извлекаете объявление функции генератора из метода handleOnFocus, а затем вызываете его из метода handleOnFocus:

  *focus() {
    yield call(request, "POST", URL, BODY);
  }

  handleOnFocus = () => {
    this.focus()._invoke();
  };

Мне удалось вызвать функцию focus (generator) и войти в консоль,Вы можете посмотреть здесь https://codesandbox.io/s/v63r54pqq3