我正在尝试创建一个搜索下拉列表，但是我的搜索过滤器未正确使用useCallback更新。 searchFilter回调不会更新第一个onChange

const [inputvalue,setInputvalue] = useState('');
const [opts,setOpts] = useState(allOptions);

const searchFilter = useCallback(
    (val) => {
        setInputvalue(val);
        const filter = val.toUpperCase();
        const ops = options.filter((opt) => opt.text.toUpperCase().indexOf(filter) > -1);
        setOpts(ops);
    },[inputvalue] // state not being updated on first onChange
);

<textArea
    onChange={(e) => searchFilter(e.target.value)}
    value={inputvalue}
/>

<ul>
    {opts.map((option) => (
        <li key={option.key}>
            {option.text}
        </li>
    ))}
</ul>

我能够通过执行回调来解决此错误：

const searchFilter = (val) => {
    setInputvalue(val);
    const filter = val.toUpperCase();
    const ops = options.filter((opt) => opt.text.toUpperCase().indexOf(filter) > -1);
    setOpts(ops);
} // this works on every onChange

我的useCallback实现有什么问题？

我什至尝试在逻辑中添加ref，但这没有用。我在React文档中阅读了他们喜欢使用ref的许多输入更改：

const [inputvalue,setOpts] = useState(allOptions);
const inputEl = useRef(null);

useEffect(() => {
    inputEl.current = inputvalue; // Write it to the ref
});

const searchFilter = useCallback(
    (val) => {
        setInputvalue(val);
        const filter = val.toUpperCase();
        const ops = options.filter((opt) => opt.text.toUpperCase().indexOf(filter) > -1);
        setOpts(ops);
    },[inputEl]
);

<textArea
    ref={inputEl}
    onChange={(e) => searchFilter(e.target.value)}
    value={inputvalue}
/>

**注意，我尝试添加JS代码段，但看来我还不能向stackoverflow添加react钩子。需要处理React版本16.8+。如果可以的话，请告诉我。