此问题在此处已有答案:
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然后没有结果显示。我尝试了这个论坛上提供的每一个解决方案与类似的标题。
1条答案
按热度按时间b4wnujal1#
请使用
onKeyPress
事件而不是onChange
。此外,request
状态不会在您设置其值后立即更新,因为它是异步操作。另一种方法是直接用输入的值来
dispatch
你的操作,比如:第一个
onKeyPress docs