Javascript 具有搜索权限的Popover组件中的自动完成

我在保存搜索查询的状态时遇到问题

当弹出框被聚焦时，searchString以undefined（图片中第二个未定义的值）开始。按下键“b”时，将触发事件，并将值设置为“”（初始化值）。如图所示，当搜索查询中出现“bart”时，console仅注册“bar”。有人知道为什么会发生这种行为吗？最终目标是，我试图在选择时保留搜索字符串（单击后它将消失）->如果您对此有任何帮助，我将不胜感激。发生这些更改的主代码块：

                <Autocomplete
                    open
                    onClose={handleClose}
                    multiple
                    classes={{
                        paper: classes.paper,
                        option: classes.option,
                        popperDisablePortal: classes.popperDisablePortal,
                    }}
                    value={pendingValue}
                    onChange={(event, newValue) => {
                        setPendingValue(newValue);
                    }}
                    // inputValue={searchString}
                    // onInputChange={(event, newValue) => {
                    //     setSearchString(newValue);
                    // }}
                    disableCloseOnSelect
                    disablePortal
                    renderTags={() => null}
                    noOptionsText="No values"
                    renderOption={(option, { selected }) => (
                        <React.Fragment>
                            <DoneIcon
                                className={classes.iconSelected}
                                style={{ visibility: selected ? 'visible' : 'hidden' }}
                            />
                            <div className={classes.text}>
                                {option.value}
                            </div>
                        </React.Fragment>
                    )}
                    options={[...suggestions].sort((a, b) => {
                        // Display the selected labels first.
                        let ai = selectedValue.indexOf(a);
                        ai = ai === -1 ? selectedValue.length + suggestions.indexOf(a) : ai;
                        let bi = selectedValue.indexOf(b);
                        bi = bi === -1 ? selectedValue.length + suggestions.indexOf(b) : bi;
                        return ai - bi;
                    })}
                    getOptionLabel={option => option.value}
                    renderInput={params => (
                        <InputBase
                            ref={params.InputProps.ref}
                            inputProps={params.inputProps}
                            autoFocus
                            className={classes.inputBase}
                            // onChange={(event) => {
                            //     console.log("event.target: ", event.target);
                            //     console.log("event.currentTarget: ", event.currentTarget);
                            //     setSearchString(event.currentTarget);
                            // }}
                            value={searchString}
                            onChange={handleInputChange}
                        />
                    )}
                />

感谢所有的帮助
 Material UI autocomplete by design会在每次选择选项时重置搜索值。如果要绕过它，请使用
useautomplete
hook根据需要对组件进行微调

至于延迟的控制台日志值，您将设置新值，然后将旧值记录到控制台日志中。很明显，它会打印旧值，你还期望什么

你的代码应该是这样的


const handleInputChange=事件=>{
//新值=>event.currentTarget.value
//旧值=>searchString
//这些值在整个函数调用过程中不会发生变化
setSearchString（event.currentTarget.value）；
//searchString在这里和这里仍然保持不变
//即使调用setState也不会更改
//在整个函数调用过程中保持不变
//因为函数式编程不允许变异
//这也许就是函数式编程的重要性所在
//比面向对象编程好得多感谢您的帮助。我不知道状态会在函数中保留旧值。我设法从useEffect钩子打印更新的值。我仍然使用原始的方式来管理状态，只是因为这将意味着对剩余的comp进行大量的返工修复了搜索字符串的保存，并更新了沙盒。非常感谢！