[英]React useCallback not updating state onChange on the first change
我正在尝试创建一个搜索下拉列表,但我的搜索过滤器没有使用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 文档中阅读了他们喜欢使用 refs 的许多输入更改:
const [inputValue, setInputValue] = useState('');
const [opts, 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 16.8+ 版本。 如果有办法我可以做到,请告诉我。
它似乎对我有用,不更新的价值是什么? 输入值还是显示的选项?
React 可以将多个 setState() 调用批处理到单个更新中以提高性能。 因为 this.props 和 this.state 可能会异步更新,所以您不应依赖它们的值来计算下一个 state。
例如,此代码可能无法更新计数器:
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
要修复它,请使用第二种形式的 setState(),它接受 function 而不是 object。 function 将接收之前的 state 作为第一个参数,并且在应用更新时的道具作为第二个参数:
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
检查此页面关于反应:State 和生命周期State 更新可能是异步的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.