onClick 事件在反应中第一次点击时不起作用

Question

在这里，当我第一次按下搜索按钮时，“用户名”状态没有收到任何数据。“用户名”状态为空，App.js 中的 API 请求失败。我第二次单击同一按钮时，一切都按预期进行。我如何让它在第一次点击时起作用？这是怎么回事？

const Search = ({setInputText, setUsername, inputText, username}) => {

    const inputHandler = (e)=> {
        setInputText(e.target.value)
    }

    const searchHandler = (e)=> {
        e.preventDefault()
        setUsername(inputText)
    }

    return (
        <div>
            <form>
                <input value={inputText} onChange={inputHandler} type="text"/>
                <button onClick={searchHandler}>Search</button>
            </form>
        </div>
    )
}

编辑：在此处添加 App.js

function App() {

  //States
  const [inputText, setInputText] = useState("")
  const [username, setUsername] = useState("")
  const [stats, setStats] = useState([])

  return (
    <div className="App">
        <h1>Game Stats</h1>
        <Search setInputText={setInputText} setUsername={setUsername} inputText={inputText} username={username} setStats={setStats}/>
        <Stats stats={stats}/>
    </div>
  );
}

Answer 1

对我来说，在我读完<button onClick={(e) => searchHandler(e)}>Search</button>之后有一些帮助

似乎事件重叠