Question

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

当弹出窗口成为焦点时，searchString以undefined（图片中的第二个undefined值）开头。当按下键“ b”时，将触发该事件，并将其设置为“”（初始化值）。如图所示，在搜索查询中显示“ bart”时，控制台仅注册“ bar”。有谁知道为什么会发生这种现象？最终目标是我尝试保留选择时的搜索字符串（onclick会消失）->希望对此有所帮助。发生这些更改的主要代码块：

                <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}
                        />
                    )}
                />

我试图存储该值，然后通过Autocomplete道具和InputBase再次使用它填充（在这两个位置上执行都会导致崩溃）。我为您的引用添加了一个沙箱：CodeSandbox

感谢所有帮助！

Answer 1

材料UI自动完成设计会在您每次选择一个选项时重置搜索值。如果要通过它，请使用useAutocomplete挂钩根据需要微调该组件。

对于延迟的控制台日志值，您要设置新值，然后控制台对旧值进行日志记录。因此，显然它将打印旧值，您还期望什么？

您的代码应该像这样


    const handleInputChange = event => {
        // new value => event.currentTarget.value
        // old value => searchString
        // these values never mutate throughout this function call

        setSearchString(event.currentTarget.value);

        // searchString still remains the same here and 
        // won't change even if you call setState
        // it remains the same throughout this entire function call
        // Since Mutation is not allowed in Functional Programming
        // This is perhaps why Functional Programming is 
        // far better than Object Oriented Programming ?

        console.log('searchString: ', event.currentTarget.value);
    }

但是，这不是观察状态变化的正确方法。更好的方法就是这样，


// This will be called whenever React
// observes a change in anyState

useEffect(() => {
  console.log(anyState)
}, [anyState])

具有搜索功能的Popover组件中的自动完成功能

1 个答案: