React 18搜索框onKeyUp事件报错：无法读取undefined的target属性

1. 错误原因 #

（1）Cannot read properties of undefined (reading 'target') 错误 #

核心问题是调用setSearchInput(e.target.value)时，参数e为undefined，常见触发场景：

• 事件绑定错误：比如写成onChange={setSearchInput()}，会在组件渲染时立即执行setSearchInput，而非等待输入事件触发，此时无事件对象传入，e自然为undefined。
• 手动调用处理函数未传参：比如在搜索按钮点击事件里直接调用输入处理函数，却没有传递事件对象。
• 防抖/节流函数未正确传参：如果对输入处理函数做了防抖包装，但未处理事件传递，会导致e丢失。

（2）console.log(results)无输出 #

通常和搜索请求未正常触发有关：

• searchInput状态未更新：上述错误导致setSearchInput执行失败，searchInput保持初始值，监听它的useEffect不会触发搜索请求。
• 请求依赖项配置错误：useEffect的依赖数组未包含searchInput，或依赖项配置异常导致请求被抑制。
• 请求本身出错：TMDB API的URL拼接错误、缺少API密钥、网络问题等，且未做错误捕获，无法看到报错信息。

2. 可靠修复方案 #

（1）修复e.target.value错误 #

确保事件处理函数正确接收事件对象：

• 直接在事件绑定中使用箭头函数传参：

<input 
  type="text"
  onChange={(e) => setSearchInput(e.target.value)}
  placeholder="搜索电影..."
/>

• 定义独立处理函数并增加校验：

const handleInputChange = (e) => {
  // 增加校验避免意外错误
  if (!e?.target) return;
  setSearchInput(e.target.value);
};

<input 
  type="text"
  onChange={handleInputChange}
  placeholder="搜索电影..."
/>

如果使用防抖函数，确保传递事件对象（以lodash的debounce为例）：

const debouncedHandleInput = useCallback(
  debounce((e) => {
    if (e?.target) setSearchInput(e.target.value);
  }, 300),
  []
);

<input onChange={debouncedHandleInput} />

（2）修复results无输出问题 #

• 确保搜索请求在searchInput变化时触发：

useEffect(() => {
  // 避免空字符串触发无效请求
  if (!searchInput.trim()) return;

  const fetchSearchResults = async () => {
    try {
      const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=你的API密钥&query=${encodeURIComponent(searchInput)}`);
      if (!response.ok) throw new Error('请求失败');
      const data = await response.json();
      console.log(data.results);
      setResults(data.results);
    } catch (err) {
      console.error('搜索请求出错:', err); // 捕获错误排查问题
    }
  };

  fetchSearchResults();
}, [searchInput]); // 依赖数组必须包含searchInput

• 检查API密钥有效性、URL是否符合TMDB接口规范，用encodeURIComponent处理搜索关键词中的特殊字符，避免URL拼接错误。

内容的提问来源于stack exchange，提问作者Razvan Zamfir