- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
在使用 history.push 加载组件后重定向时 - 我的组件会再次呈现。导致 componentDidMount()
函数运行两次。
这是我的一个组件的简化片段。我希望 componentDidMount()
只运行一次 - 并且它在没有 history.push
的情况下按预期工作。但是当我添加 history.push
- 它会加载两次。 (如果我使用 react-router
中的 Redirect
也会发生同样的情况)
import * as React from "react";
import { history } from "../../configureServices";
import { explore } from "../../routes";
export class WelcomeComponent extends React.Component<object, object> {
componentDidMount() {
// tslint:disable-next-line:no-console
console.log("componentDidMount");
history.replace(explore);
}
render() {
return <div />;
}
}
控制台:
componentDidMount
componentDidMount
很想找到一种只运行一次的方法。
编辑:感谢大家的回复。我将发布一个快速代码片段,然后稍后发布一个 Fiddle。
--- 更新:
我正在使用 React-Router。我在 configureServices.ts 文件中构建历史记录(连同一些其他服务)。
// configureServices.ts
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
我的 index.ts 看起来像这样:
import { history } from "./configureServices";
ReactDOM.render(
<Provider {...stores}>
<AppComponent history={history} />
</Provider>,
document.getElementById("root") );
我的包含所有路由的 AppComponent 如下所示:
import { History } from "history";
import { Route, Switch } from "react-router-dom";
import { Router } from "react-router-dom";
import * as Routes from "../../routes";
...
// Import Components
...
interface Props {
history: History;
...
}
export class AppComponent extends React.Component<Props, {}> {
componentDidMount() {
this.props.authStore && this.props.authStore.authenticate();
}
render() {
return (
<Router history={this.props.history}>
// For toasts, please ignore for this example
<ToastProvider
placement={toastPlacement}
autoDismissTimeout={toastDismissTimeout}
>
// Main App Div = Navbar + Components
<div className="font-sans flex flex-col h-full text-phi-green-munsell bg-phi-gunmetal-rich-dark">
<NavBarComponent />
// This is where the routes are
<div className="container mx-auto p-2 md:p-3 lg:p-4 justify-start">
<Switch>
<Route
exact={true}
path={Routes.homePage}
component={HomepageContainer}
/>
<Route
exact={true}
path={Routes.logOut}
component={LogOutContainer}
/>
<Route
exact={true}
path={Routes.welcome}
component={WelcomeContainer}
/>
<Route
path={Routes.explore}
component={ExploreComponent}
/>
<Route
path={Routes.searchResults}
component={SearchResultsComponent}
/>
</Switch>
</div>
<Footer />
<DevTools position={mobxDevToolsPosition} />
</div>
</ToastProvider>
</Router>
);
}
}
再次感谢你帮我解决这个问题。
最佳答案
有几件事可能会导致您的组件重新挂载。
Route
组件,但路径从一个更改为另一个。即使最终显示的是同一个组件,但是匹配到的Route
组件发生了变化。关于javascript - React history.push 重新加载组件。希望它只加载一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54426308/
所以基本上我正在开发一个 Ionic/React Typescript 应用程序,当我导航到应用程序时,这个奇怪的页面转换发生了两次(见下面的 gif) 我检查了一下,不是渲染调用了两次,因为 com
我正在开发一个 ember 应用程序(使用 ember-1.0.pre.js)。我正在尝试在 IE8 上提供跨浏览器兼容性。 问题在于每次转换后都会生成 url,这对用户来说似乎不正确/错误。假设我点
使用 pry 插件:pry-clipboard 当我输入“copy-history”来复制我历史的最后一行时,它实际上是在复制“copy-history”并粘贴“copy-history”。 我是不是
我正在开发一个我想使用的 React 应用程序 @types/history模块.. 已安装 npm install --save @types/history 在我的组件文件中尝试导入 import
我刚刚在 Google Chrome 中打开了一个带有少量基本标签(如 html、body、head 等)的空白 HTML 页面,并尝试在控制台中执行以下命令: history.pushState(n
我在我的网络浏览器中调用了一些 javascript。目的是获取 history.length,如果长度 == 0,则在按下后退键时退出应用程序。 所以我使用了 window.external.not
具体来说,调用下面的代码片段: history.replaceState(undefined, undefined, "#" + value) 不会正确地影响当前页面的后退按钮行为,但会向“浏览历史”
为什么我要使用 react-router-dom 中的路由器历史记录而不是 window.history.back()? 有没有一种方法可以检测用户是否来 self 的应用程序中的某个页面或来自特定外
我为 angular.js 中内置的 phonegap 应用程序设置了一些后退/下一步按钮。 我正在为页面使用 Angular 部分,并使用 window.history 作为一些简单的后退/下一步按
我正在通过 Ajax 加载页面。当用户单击链接时,页面已成功加载 AJAX,但当用户单击后退按钮时,页面会重新加载初始页面。所以场景是这样的。 载入初始页面(index.php) 用户点击链接 页面加
这个问题在这里已经有了答案: How to get notified about changes of the history via history.pushState? (16 个答案) 关闭
History API使得在浏览器历史记录中存储状态对象成为可能。现在试试 this demo (但它与其他任何行为相同,请选择您最喜欢的 :)): 点击一些链接建立一些历史 清除您的浏览器历史记录(
我正在开发一个网站,我需要返回到我访问过的页面。我正在使用parent.history.back。我的一位 friend 建议使用 window.history.back 而不是 Parent.his
几年前,我的一个 Perforce depot 中的一个子文件夹(例如 //FirstDepot/LargeSubfolder/...)变得太大而无法维护,所以我将它“迁移”到一个它自己的仓库(例如
到目前为止,我已经阅读了很多有关 React-router v4 和 npm 历史库的内容,但似乎没有一个对我有帮助。 我的代码按预期运行,当使用 History.push() 方法更改 url 时,
我正在通过phonegap做移动html页面我想将用户重定向到首页。所以我无法给出直接链接,例如指向index.html的href 当用户单击 Logo 时,我想计算他访问的页面长度并使用 histo
使用 django-simple-history ,如何从我的模型中获取最后更改的对象? 我尝试了 MyModel.history.most_recent(),它需要一个模型实例,因此可能会返回所选实
过去,如果我不确定某些内容是否受支持, 我将在 Javascript 中输入 If(something){ ... }。 最近我发现Modernizr也很容易检测浏览器的支持。 它将向 HTML 添加
我尝试在应用程序中使用 history.replace('/user') 重定向用户,但是当我这样做时,它什么也没做。我正在使用 Auth0 并遵循他们的指南: https://auth0.com/d
model.compile(loss='categorical_crossentropy', optimizer=keras.optimizers.Adam(), metrics=['accuracy
我是一名优秀的程序员,十分优秀!