React输入框输入字符后失焦且页面重载的问题求助

看起来你遇到的问题根源其实是组件重渲染时的DOM卸载/重建导致焦点丢失，加上每次输入触发loading状态，让你误以为是页面重载。我来一步步帮你分析和解决：

问题核心原因 #

1. Loading状态触发DOM完全替换：你的组件在loading为true时，直接返回<p>Loading restaurants...</p>，这会把原来包含输入框的整个DOM树卸载。当fetch完成后，又重新渲染输入框等元素——新的输入框DOM元素自然会丢失之前的焦点，这个过程看起来就像页面“重载”了。
2. 频繁的服务器请求加剧闪烁：每次输入字符都会触发searchTerm变化，进而调用useEffect发起Supabase查询，导致组件频繁进入loading状态，放大了焦点丢失和“重载”的错觉。
3. AutoFocus属性写法不规范：JSX中布尔属性autoFocus不需要赋值为字符串，正确写法是直接写autoFocus或autoFocus={true}。
4. 错误状态未正确绑定：你在useEffect里没有把Supabase返回的error同步到组件的error状态，导致错误永远无法显示。

具体解决方案 #

1. 先解决焦点丢失和“重载”感：优化Loading展示方式

不要在loading时完全替换组件结构，而是在同一个容器内展示loading提示，保留输入框的DOM节点：

// 替换原来的loading/error判断和return部分
return (
  <div>
    <h1>All Restaurants</h1>
    {/* 修正autoFocus写法 */}
    <input 
      type="text" 
      autoFocus
      placeholder="Search restaurants"
      value={searchTerm}
      onChange={(e) => {
        setSearchTerm(e.target.value);
        console.log("Search input changed:", e.target.value);
      }}
    />
    {/* 在同一容器内展示loading，不卸载输入框 */}
    {loading && <p style={{fontSize: '14px', color: '#666'}}>Loading results...</p>}
    {error && <p style={{color: 'red'}}>Error loading restaurants: {error.message}</p>}
    <ul>
      {restaurants.map((r) => (
        <li key={r.id}>{r.name}</li>
      ))}
    </ul>
  </div>
);

2. 选择更合理的过滤策略（提升流畅度）

根据你的餐厅数据量大小，二选一即可：

• 小数据量：客户端过滤（推荐，无请求延迟）
  先一次性拉取所有餐厅数据，之后在客户端本地过滤，避免频繁请求数据库：

function RestaurantsPage() {
  const [allRestaurants, setAllRestaurants] = useState([]); // 存储全量数据
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");

  // 客户端实时过滤
  const filteredRestaurants = allRestaurants.filter(r => 
    r.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 仅在组件挂载时拉取一次全量数据
  useEffect(() => {
    async function fetchAllRestaurants() {
      setLoading(true);
      const { data, error } = await supabase.from("restaurants").select("id, name");
      setAllRestaurants(data || []);
      setError(error); // 补上错误状态绑定
      setLoading(false);
    }
    fetchAllRestaurants();
  }, []);

  if (loading) return <p>Loading restaurants...</p>;
  if (error) return <p>Error loading restaurants: {error.message}</p>;

  return (
    <div>
      <h1>All Restaurants</h1>
      <input 
        type="text" 
        autoFocus
        placeholder="Search restaurants"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {/* 渲染客户端过滤后的结果 */}
        {filteredRestaurants.map((r) => (
          <li key={r.id}>{r.name}</li>
        ))}
      </ul>
    </div>
  );
}

• 大数据量：服务器端过滤+防抖优化
  如果餐厅数据量很大，必须用服务器端过滤，就给请求加防抖，避免每次输入都发起请求：

import { useState, useEffect, useCallback } from 'react';
import { debounce } from 'lodash'; // 也可以自己实现简单的防抖函数

function RestaurantsPage() {
  const [restaurants, setRestaurants] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");

  // 封装防抖的查询函数
  const debouncedFetch = useCallback(debounce(async (term) => {
    setLoading(true);
    let query = supabase.from("restaurants").select("id, name");
    if (term.trim() !== "") {
      query = query.ilike("name", `%${term}%`);
    }
    const { data, error } = await query;
    setRestaurants(data || []);
    setError(error);
    setLoading(false);
  }, 300), []); // 300ms延迟，用户停止输入后再请求

  // 监听searchTerm变化，触发防抖查询
  useEffect(() => {
    debouncedFetch(searchTerm);
    // 组件卸载时取消未执行的请求
    return () => debouncedFetch.cancel();
  }, [searchTerm, debouncedFetch]);

  // 优化后的return部分（保留输入框DOM）
  return (
    <div>
      <h1>All Restaurants</h1>
      <input 
        type="text" 
        autoFocus
        placeholder="Search restaurants"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      {loading && <p>Loading results...</p>}
      {error && <p>Error loading restaurants: {error.message}</p>}
      <ul>
        {restaurants.map((r) => (
          <li key={r.id}>{r.name}</li>
        ))}
      </ul>
    </div>
  );
}

3. 补上错误状态的绑定

不管用哪种过滤方式，都要把Supabase返回的error同步到组件状态：

async function fetchRestaurants() {
  setLoading(true);
  let query = supabase.from("restaurants").select("id, name");
  if (searchTerm.trim() !== "") {
    query = query.ilike("name", `%${searchTerm}%`);
  }
  const { data, error } = await query;
  console.log("Supabase returned data:", data);
  console.log("Supabase error (if any):", error);
  setRestaurants(data || []);
  setError(error); // 必须加上这一行
  setLoading(false);
}

总结 #

通过保留输入框DOM节点避免卸载重建、选择合适的过滤策略减少请求频率，再加上规范属性写法和错误状态绑定，就能彻底解决焦点丢失和“页面重载”的问题啦～

内容来源于stack exchange