В React ES6, почему входное поле теряет фокус после ввода символа, если я не добавляю автофокус, но все же вся страница ⇐ Html

[Anonymous]

У меня есть поле ввода, которое теряет фокус и перезагружает всю страницу после каждой добавленной буквы, и когда я добавляю автофокус, страница поддерживает фокус, но все еще перезагружает страницу. Как мне это исправить? < /P>

Код: Выделить всё

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

const filteredRestaurants = restaurants.filter(r =>
r.name.toLowerCase().includes(searchTerm.toLowerCase())
);

useEffect(() => {
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 || []);
setLoading(false);
}

fetchRestaurants();
}, [searchTerm]);

if (loading) return 
Loading restaurants...
;
if (error) return 
Error loading restaurants: {error}
;

return (

All Restaurants
 {
setSearchTerm(e.target.value);
console.log("Search input changed:", e.target.value);
}}
/>
[list]
{restaurants.map((r) => (
[*]{r.name}
))}
[/list]

);
}
// 1

Я попытался добавить ключ, как предложено в других сообщениях, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/797 ... cter-unles