向mobx函数添加debounce

我正在创建一个响应应用程序,当用户输入时向服务器发出搜索请求。我想解除此搜索请求的限制,但不确定如何在现有代码中实现它:

Mobx商店:

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

响应组件调用 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);

问题是我不能打电话 debounceSearch 直接来自 Search 由于上述原因,组件。但我想脱口 getPlanets 函数,它返回一个promise(我不确定lodash debounce函数是否可以返回包装函数返回的promise)?