javascript – React の onChange が入力のテキストの最後の文字をキャプチャしない

プログラミングQA

2022.11.03

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 を入力すると、結果が表示されないことが予想されます。このフォーラムで提供されているすべてのソリューションを同様のタイトルで試しました。

Source link