Javascript 为什么 onKeyUp 事件在这个 React 18 搜索框中返回 undefined

您需要将该事件传递给debaleMovieSearch，并进一步传递给doMovieSearch:

import { ReactComponent as Magnifier } from '../../icons/magnifier.svg';
import { useState } from 'react';
import axios from 'axios';

function Searchbox({ movie }) {

  const API_URL = 'https://api.themoviedb.org/3';
  const [searchInput, setSearchInput] = useState('');
  const [results, setResults] = useState([]);
  const timeOutInterval = 1000;

  const doMovieSearch = async (e) => {
    setSearchInput(e.target.value);

    if (e.target.value.length >= 3) {
      const { data: { results } } = await axios.get(`${API_URL}/search/movie`, {
        params: {
          api_key: process.env.REACT_APP_API_KEY,
          query: e.target.value
        }
      });

      setResults(results);
    }
  }

  const debounceMovieSearch = (e) => {
    setTimeout(() => doMovieSearch(e), timeOutInterval);
  }

return (
    <form className="search_form w-100 mx-auto mt-2 mt-md-0">
      <div className="input-group">
      <input className="form-control search-box" type="text" defaultValue={searchInput} onKeyUp={debounceMovieSearch} placeholder="Search movies..." />
        <div className="input-group-append">
          <button className="btn" type="button">
            <Magnifier />
          </button>
        </div>
      </div>
    </form>
 );
}
export default Searchbox;

此外，我对doMovieSearch中的条件做了一个小调整，使用e.Target.value.long而不是searchInput.long，因为我们想要判断用户输入的长度，而不是之前的searchInput状态.