向 mobx 函数添加去抖动

Question

我正在创建一个 React 应用程序，它在用户键入时向服务器发出搜索请求。我想去抖这个搜索请求，但不确定如何在我现有的代码中实现它：

Mobx 商店：

// function which initiates a fetch request to server
@action searchPlanet = async (event) => {
            this.searchString = event.target.value;
            this.planets = await getPlanets(this.searchString);
        }

React 组件调用searchPlanet:

const Search = observer(({ store }) => {
    const planetList = toJS(store.planets);
    return (
        <div>
            <div className={style.search_container}>
                <input type="text" id="search" onChange={e => store.searchPlanet(e)} value={store.searchString} placeholder="search planet" />
            </div>
        </div>
    )
})

我不能直接在 onChange 上使用 debounce 功能，因为这也会延迟搜索组件的重新渲染，因此用户会在一段时间后看到键入的文本。但是我不知道如何在我的商店中实现去抖动功能？我可以这样做：

import _ from lodash

@action searchPlanet = async (event) => {
            this.searchString = event.target.value;
            this.planets = await getPlanets(this.searchString);
        }

debounceSearch = _.debounce(this.searchPlanet, 250);

问题是由于上述原因，我无法直接从 Search 组件调用 debounceSearch。但是我想去抖动 getPlanets 函数，return 是一个承诺（我不确定 Lodash 去抖动函数是否可以 return 包装函数 return 的承诺）？

Answer 1

您可以在去抖函数中代替在 searchPlanet 操作中为 planets 赋值。

例子

@observer
class App extends Component {
  @observable value = "";
  @observable query = "";

  onChange = action(event => {
    const { value } = event.target;
    this.value = value;
    this.search(value);
  });

  search = debounce(action(query => {
    this.query = query;
  }), 250);

  render() {
    const { value, query, onChange } = this;
    return (
      <div>
        <input value={value} onChange={onChange} />
        <div>{query}</div>
      </div>
    );
  }
}

向 mobx 函数添加去抖动

Adding debounce to mobx function

javascript

ecmascript-6

reactjs

mobx