Нужно загрузить на страницу карточки, после того, как пользователь нажмет на Enter.
Изначально запрос и компонента выглядят следующим образом:
const Adverts = () => {
const [adverts, setAdverts] = useState([]);
useEffect(() => {
const getAdverts = async () => {
try {
const res = await axios.get("http://localhost:5000/api/adverts");
console.log(res.data);
setAdverts(res.data);
} catch (err) {}
};
getAdverts();
console.log(adverts);
}, []);
return (
<div style={{ display: "flex", flexDirection: "column" }} >
{adverts.map((item) => (
<Advert item={item} key={item.id} />
))}
</div>
);
};
Пробовала добавить в div onKeyPress, и передала туда функцию, но все равно не получается вызвать getAdverts, когда нажимаю на Enter.
const Adverts = () => {
const [adverts, setAdverts] = useState([]);
const getAdverts = () => {
const res = axios.get("http://localhost:5000/api/adverts").then((res)=> {
setAdverts(res.data);
});
console.log(res.data);
};
useEffect(getAdverts, []);
return (
<div
style={{ display: "flex", flexDirection: "column" }}
onKeyPress={getAdverts}
>
{adverts.map((item) => (
<Advert item={item} key={item.id} />
))}
</div>
);
};
Есть в Реакте еще какой-нибудь способ обрабатывать нажатие на клавиши?