[ad_1]
GIFを見る React でタグによる簡単な検索を作成しています。 ページには 10 件の投稿があり、各投稿にはタグがあります。 たとえば、「Cat」と「Cry」の 2 つのタグがあります。すべてのタグはローカル メモリに保存され、BD はありません。 検索に文字「C」を入力すると、ページは「Cat」タグと「Cry」タグの付いた投稿を正しくレンダリングします。 しかし、検索バーに「Ct」と入力すると、これら 2 つの投稿が最初の文字で再度レンダリングされますが、後続の文字「T」はキャプチャされません。 添付のGIFをご覧ください。
import React, { useEffect, useState } from "react";
import CardList from "../../features/CardList";
import SearchInput from "../../features/SearchInput";
import fetchFilms from "../../api/FetchAPI";
import { formatData } from "../../services/formatData";
import { useDispatch } from "react-redux";
import { filterTags, getFilmsList } from "../../store/actions";
function PageList() {
const dispatch = useDispatch();
const [request, setRequest] = useState("");
async function getFilms() {
const data = await fetchFilms();
const dataFormat = formatData(data);
dispatch(getFilmsList(dataFormat));
}
useEffect(() => {
getFilms();
}, []);
function requestHandler(e) {
console.log('request', request)
setRequest(e.target.value);
dispatch(filterTags(request));
}
return (
<div>
<SearchInput onChange={requestHandler} />
<CardList />
</div>
);
}
export default PageList;
Cat、Cry というタグがあり、Ct を入力すると、結果が表示されないことが予想されます。 このフォーラムで提供されているすべてのソリューションを同様のタイトルで試しました。
[ad_2]
Source link
コメント