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

Question

我正在使用带有 react-router-dom 5.2.0 和 react-transition-group 4.4.2 的 React 17.0.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 封装在路由器中，如下所示

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

简化的搜索组件如下：

const Search = ({ queries }) => {
  console.log("...from search component: queries: ", queries);
  return <></>;
};

export default Search;

正常的行为应该是： -

• 在输入一些带有提供的 url 和查询的文本调用 history.push() 后单击搜索图标或按 Enter 键，并且应根据给定的 url 呈现特定组件。
• 在渲染时，console.log 显示具有位置、历史和匹配的道具。位置键具有搜索键以获取查询。此查询记录到控制台。

实际行为如下：

• 按搜索或输入时，控制台会显示带有输入查询的道具（如预期的那样）并遵循进一步的例程和检查
• 经过一定时间（几乎 0 秒）后，组件再次重​​新渲染，但这次使用的是旧道具（即我在此字符串之前键入的查询字符串）。这会导致加载附加数据并向用户显示（当前查询已加载，旧查询响应也已加载）。

控制台响应如下所示。首先我在搜索框中搜索“旧”，然后搜索“新”

我的问题是为什么我的搜索组件在使用“新”查询呈现后被“旧”查询重新呈现？

需要注意的是，当我使用 chrome 重新加载按钮重新加载页面或当我在搜索以外的选项卡上时，只显示“新”查询响应。仅当我已经在搜索选项卡上显示一些“旧”查询结果并想要搜索其他内容（“新”查询）时，才会出现上述错误。

更新1：

我发现当我将路由封装在 TransitionGroup 和 CSSTransition 组件中时会出现问题。没有它，输出是预期的。但是我仍然无法解决这个问题。我创建了一个具有最小设置的沙箱来复制问题。

标签： javascriptreactjsreact-routerreact-hooksreact-transition-group