https://medium.com/@sankalpa115/usedebo ... 71f02ff8d8
Но ничего рендеринг, и я получаю эту ошибку: < /p>
Не удалось разрешить импорт "Uldebounce" "src /searchcomponent.jsx".
существует ли файл? 10.9.2 и VITE
Я попытался добавить к моему index.html без результатов.
main.js
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
,
)
< /code>
app.js
import React from 'react';
import Button from '@mui/material/Button';
import FirstComponent from './FirstComponent';
import SearchComponent from './SearchComponent';
function App() {
return (
Login
)
}
export default App
< /code>
usedebounce.jsx
import { useState, useEffect } from 'react';
function UseDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
export default UseDebounce;
< /code>
searchcomponent.jsx
import React, { useState } from 'react';
import UseDebounce from 'UseDebounce';
function SearchComponent() {
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
// Set delay time according to your needs
const debouncedSearchTerm = UseDebounce(searchTerm, 300);
useEffect(() => {
// Here you can trigger your search logic, like an API call
// For demonstration, let's just console log the debounced search term
console.log("Search triggered with term:", debouncedSearchTerm);
}, [debouncedSearchTerm]);
const handleInputChange = (event) => {
setSearchTerm(event.target.value);
};
return (
- {searchResults.map((result, index) => (
- {result}
))}
}
export default SearchComponent;
Подробнее здесь: https://stackoverflow.com/questions/794 ... x-does-the
