React History 使用新旧道具推送重新渲染组件

如何解决React History 使用新旧道具推送重新渲染组件

我正在使用 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 中，如下

import { browserRouter} from "react-router-dom";
<browserRouter>
  <App />
</browserRouter>

简化的搜索组件如下：

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，它复制了这个问题。