如何从lodash的debounce防抖函数返回值，适配react-select/async选项返回需求

• 原代码中inputDebouncer函数仅创建了防抖函数实例，没有实际调用，所以逻辑完全不执行
• 若直接在创建后加()执行，会导致每次输入都生成新的防抖实例并立刻运行，防抖逻辑完全失效
• 多余的Promise嵌套也会导致状态resolve逻辑异常

将防抖函数实例持久化，避免每次调用都新建实例，同时正确绑定Promise的resolve逻辑到防抖回调中即可，修正后完整代码如下：

import { debounce } from 'lodash-es'
import * as EmailValidator from 'email-validator';
import AsyncSelect from 'react-select/async';
import { Component } from 'react'
import { connect } from 'react-redux'
import { getcolleaguesList, joinDirectRoom, setInvitee, setInvitees } from '../redux/actions/RoomActions'


export class DMSearchBar extends Component {
    constructor(props) {
        super(props)
        // 全局初始化唯一防抖实例，保证防抖逻辑生效
        this.debouncedFetchColleagues = debounce(async (input, resolve) => {
            console.log(input)
            const colleaguesList = await getcolleaguesList(input)
            const mapped = Object.keys(colleaguesList).map(idx => ({
                value: colleaguesList[idx],
                label: `${colleaguesList[idx].displayname} <${colleaguesList[idx].username}>`
            }))
            resolve(mapped)
        }, 1000)

        this.getAsyncOptions = (input) => {
            // 邮箱校验逻辑直接返回结果
            if (EmailValidator.validate(input)) {
                return Promise.resolve([
                    {
                        value: input,
                        label: "Email value: " + input,
                        inviteeType: 'email'
                    }
                ])
            }
            // 非邮箱走防抖查询逻辑
            return new Promise((resolve) => {
                this.debouncedFetchColleagues(input, resolve)
            })
        }

        this.handleContactClick = (contact, contactClickAction) => {
            switch (contactClickAction) {
                case 'joinDirectRoom':
                    this.props.joinDirectRoom(contact)
                    break;
                case 'addToInviteeList':
                    this.props.setInvitees(contact)
                    break;
                default:
                    this.props.setInvitees([])
                    break;
            }

        }
    }

    render() {
        return (
            <div>
                <AsyncSelect
                    loadOptions={inputValue => this.getAsyncOptions(inputValue)}
                    onChange={opt => this.handleContactClick(opt, 'addToInviteeList')}
                    placeholder="Enter name or email address"
                    isClearable="true"
                />
            </div >
        )
    }
}

export default connect({}, { getcolleaguesList, joinDirectRoom, setInvitees, setInvitee })(DMSearchBar)

• 防抖实例提至构造函数根级别初始化，全局唯一，不会每次输入重建导致防抖失效
• 把Promise的resolve方法作为参数传入防抖回调，接口请求完成后再调用resolve返回结果，即可正常拿到包含value、label字段的options数组
• 移除多余嵌套的Promise，简化逻辑避免状态混乱

内容的提问来源于stack exchange，提问作者L_Fr