reactjs React中的onChange未捕获Input [duplicate]中文本的最后一个字符

imzjd6km  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(116)

此问题在此处已有答案

The useState set method is not reflecting a change immediately(共16个答案)
21小时前关门了。
See GIF我在React中建立了一个简单的标签搜索。你在页面上有10个帖子,每个帖子都有一个标签。例如,有2个标签“Cat”和“Cry”。所有标签都存储在本地内存中,没有BD。如果我在搜索中输入字母“C”,页面就会正确显示带有“Cat”和“Cry”标签的帖子。但是当我在搜索栏中输入“Ct”时,它再次呈现这两个帖子的第一个字母,但没有捕捉到后面的字母“T”。2请看附件中的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;

我希望,如果我有标签猫,哭,我输入Ct然后没有结果显示。我尝试了这个论坛上提供的每一个解决方案与类似的标题。

b4wnujal

b4wnujal1#

请使用onKeyPress事件而不是onChange。此外,request状态不会在您设置其值后立即更新,因为它是异步操作。
另一种方法是直接用输入的值来dispatch你的操作,比如:
第一个
onKeyPress docs

相关问题