array.length メソッドが、handleChange イベント ハンドラーの入力ステップよりも常に 1 ステップ遅いのはなぜですか?
P粉596161915
2023-08-15 18:06:33
<p>入力に基づいてフィルタリングし、オブジェクトが 10 個以下の場合にのみ結果を表示するリストを作成しようとしていますが、array.length は常に入力より遅れます。 </p>
<pre class="brush:php;toolbar:false;">const [countriesToShow, setCountriesToShow] = useState([])
const [newSearch, setSearch] = useState('')
const [showSearched, setShowShearched] = useState(true)
const [notificationMessage, setNotificationMessage] = useState(null)
useEffect(() => {
console.log(countriesToShow.length)
},[表示する国])
const handleSearchChange = (イベント) => {
setCountriesToShow(countries.filter(country =>
国名.common.toLowerCase().includes(event.target.value.toLowerCase())))
setSearch(event.target.value)
if (event.target.value.trim().length === 0) {
setNotificationMessage(null)
setShowShearched(false)
}
else if (countriesToShow.length <= 10) {
setNotificationMessage(null)
setShowShearched(true)
console.log(countriesToShow.length)
}
それ以外 {
setNotificationMessage('リストが長すぎます')
setShowShearched(false)
console.log(countriesToShow.length)
}
}</pre>
<p> エフェクトフックを使用して長さを正しく出力することができましたが、入力よりも遅れているため、これを「else if (countriesToShow.length <= 10)」に実装する方法に混乱しています。 。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
リーリーhandleSearchChangeを呼び出してからsetCountriesToShowを呼び出して状態を更新する場合:再レンダリングをトリガーしました。新しく更新された状態値は、次回の再レンダリングでのみ使用可能になるため、遅れが生じます。
以下の値を使用したい場合は、最初にそれを変数に保存する必要があります:
リーリー