Typahead 搜索 - 为什么我的 React State 落后了一步？

Question

我正在构建一个打字头搜索，它侦听输入的状态并呈现包含输入的搜索结果列表。但我的函数 checkTypaheadMatches（为与输入状态匹配的结果设置状态）却落后了一步。由于某种原因，在这个函数中，输入状态落后了一步。

但是，如果我在函数外部控制台记录输入状态，则它不会落后。我很困惑，因为我认为我的 onChange 函数设置当前在我的输入上。怎么了？我该如何解决它？

这是我的 App.jsx（它呈现 Header 组件，该组件呈现我的 SearchBar 组件。）

import { useState } from 'react'
import { Outlet, useNavigate } from "react-router-dom"
import Header from "./components/Header"

const App = () => {
  const navigate = useNavigate()

  const validRecipTypes = ["medical doctor", "doctor of osteopathy", "doctor of podiatric medicine", "physician assistant", "nurse practitioner", "certified registered nurse anesthetist", "doctor of dentistry"]

  const [recipTypeQ, setRecipTypeQ] = useState("")
  const [typaheadMatches, setTypaheadMatches] = useState(validRecipTypes)
  const [searchResults, setSearchResults] = useState([])

  const checkTypaheadMatches = () => {
    let matches = []
    for (const recipient_type of validRecipTypes) {
        if (recipient_type.includes(recipTypeQ.toLowerCase())) {
            matches.push(recipient_type)
        }
    }

    console.log("Am I fixed yet?: ", recipTypeQ) // <-- this is one step behind!

    setTypaheadMatches(matches)
  }

  const onRecipTypeQChange = (e) => {
    setRecipTypeQ(e.target.value, checkTypaheadMatches()) // <-- did I do this right?
  }

  const handleSearch = (e) => {
    // search function
  }

  return <>
    <div className="App w-screen p-8">
      <Header 
        onRecipTypeQChange={onRecipTypeQChange} 
        handleSearch={handleSearch} 
        recipTypeQ={recipTypeQ}
        typaheadMatches={typaheadMatches}
        setTypaheadMatches={setTypaheadMatches}
        />
      <Outlet context={[
        searchResults, setSearchResults,
        validRecipTypes
      ]} />
    </div>
  </>
}

export default App

我的SearchBar.jsx

import TypaheadMatchesDisplay from "./TypaheadMatchesDisplay";

const SearchBar = ({onRecipTypeQChange, handleSearch, typaheadMatches}) => {
    return <div className="flex items-center gap-6 px-4 border-2 border-green-500 relative">
        <label htmlFor="search_form" className="text-lg font-medium">Search:</label>

        <form data-test="search-form" onSubmit={handleSearch} method="GET" id="search_form">

            <input onChange={onRecipTypeQChange} type="text" id="recipTypeQ" name="recipTypeQ" required mindocLength="1" placeholder="search by recipient type..."/>

            <TypaheadMatchesDisplay typaheadMatches={typaheadMatches}/>

            <button data-test="submit-button" type="submit" form="search_form" value="Submit">Submit</button>
        </form>
    </div>
}

export default SearchBar

Answer 1

落后一步是因为你检查错地方了。

checkTypaheadMatches

函数的作用是查找匹配项，但不设置值。所以设置完后应该检查

recipTypeQ

的值。

您可能不需要调用

checkTypaheadMatches

设置函数中的

useState

const onRecipTypeQChange = (e) => {
  checkTypaheadMatches();
  setRecipTypeQ(e.target.value);
  // check the value of recipTypeQ here
}