问题描述
我正在使用 React 17.0.2 和 react-router-dom 5.2.0 和 react-transition-group 4.4.2。
const history = useHistory();
const [searchBarText,setsearchBarText] = useState("");
return(
<NavItem>
<div>
<input type="text" name="search" value={searchBarText} onChange={(e)=> setsearchBarText(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter") { history.push("/search?q=" + searchBarText); console.log( "...pushed to history: ",searchBarText," history is : ",history ); setsearchBarText(""); } }} />
<NavLink to={ "/search?q=" + searchBarText} onClick={()=> setsearchBarText("")} >
<i className="fas fa-search"></i>
</NavLink>
</div>
</NavItem>
);
简化的路由如下:
const location = useLocation(); const SearchWithQuery = ({ location }) => (
<Search queries={getQueryObjects(location.search)} /> ); return (
<Header />
<TransitionGroup>
<Csstransition key={location.key} classNames="slide" timeout={2000}>
<Switch location={location}>
//all routes
<Route path="/search" component={ SearchWithQuery} />
</Switch>
</Csstransition>
</TransitionGroup>
);
简化后的 index.js 包裹在 router 中,如下
简化的搜索组件如下:
const Search = ({ queries }) => {
console.log("...from search component: queries: ",queries);
return <></>;
};
export default Search;
正常行为应该是:-
- 在输入一些文本后单击搜索图标或按 Enter 键,使用提供的 url 和查询调用 history.push(),并且应根据给定的 url 呈现特定组件。
- 在渲染时,console.log 显示具有位置、历史和匹配的道具。位置键具有用于获取查询的搜索键。此查询记录到控制台。
实际行为如下:
- 按下搜索或输入 Enter 键后,控制台会显示带有键入查询的道具(如预期)并遵循进一步的例程和检查
- 在一定时间(几乎 0 秒)后再次重新渲染组件,但这次使用旧道具(即我在此字符串之前键入的查询字符串)。这会导致加载额外的数据并向用户显示(当前查询已经加载,旧查询响应也被加载)。
我的问题是为什么我的搜索组件在使用“新”查询呈现后会被“旧”查询重新呈现?
需要注意的是,当我使用 chrome 重新加载按钮重新加载页面时,或者当我在搜索以外的选项卡上时,只会显示“新”查询响应。仅当我已经在搜索选项卡上并显示一些“旧”查询结果并想要搜索其他内容(“新”查询)时,才会出现上述错误。
更新 1:
我发现当我将路由封装在 TransitionGroup 和 Csstransition 组件中时会出现问题。没有它,输出正如预期的那样。但我仍然无法解决这个问题。我用最少的设置创建了一个 sandbox,它复制了这个问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)