假设我有3个输入:rate,sendAmount和receiveAmount.我把3个输入放在useEffect diffing params上.规则是:
receiveAmount = sendAmount * ratesendAmount = receiveAmount / ratereceiveAmount = sendAmount * rate何时sendAmount > 0或我计算sendAmount = receiveAmount / rate何时receiveAmount > 0这是代码框https://codesandbox.io/s/pkl6vn7x6j来演示这个问题.
有没有办法比较oldValues和newValues喜欢,componentDidUpdate而不是为这种情况下制作3个处理程序？
谢谢
这是我的最终解决方案usePrevious
https://codesandbox.io/s/30n01w2r06
在这种情况下,我不能使用多个useEffect因为每个更改导致相同的网络调用.这也是我也用它changeCount来跟踪变化的原因.这changeCount也有助于跟踪仅来自本地的更改,因此我可以防止因服务器更改而进行不必要的网络调用.
我的React应用程序中有一个页面,如果表单很脏,我想阻止用户离开.
在我的react-routes中,我正在使用onLeave prop这样:
<Route path="dependent" component={DependentDetails} onLeave={checkForm}/>
而我的onLeave是:
const checkForm = (nextState, replace, cb) => {
if (form.IsDirty) {
console.log('Leaving so soon?');
// I would like to stay on the same page somehow...
}
};
有没有办法防止新路由被触发并使用户保持在同一页面上？
我正在开发一个反应应用程序，我想根据某些条件阻止我的组件卸载。
据我研究，我发现使用 React Router 的 setRouteLeaveHook 的一个选项（如此处所述）。但问题是我有相同的路线，即两个组件的 url 相同。另外，我没有 this.props.router 选项或 this.context.router 选项，我可以在其中传递它。
有什么我可以做的吗？
我有这个组件从api检索帖子,但每次用户按下后退按钮时,都会触发componentDidMount事件并重复api调用.
反应或反应路由器是否提供了检测后退按钮被按下的方法,以便我可以阻止api呼叫？
import React, { Component } from 'react'
import { fetchData } from '../actions/actions'
import { connect } from 'react-redux'
import { receivePosts } from '../actions/actions'
import { PostList } from '../components/PostList'
import { withRouter } from 'react-router-dom'
class PostListContainer extends Component {
componentDidMount() {
this.props.fetchData("posts", receivePosts)
}
render() {
const { posts, active} = this.props
return (
<PostList
posts={active === '' ? posts : posts.filter( p => p.category === active)}
/>
)}
}
function mapStateToProps (state) {
return …在旧版本中,我可以在我的组件中使用setRouteLeaveHook.
例如(SO):检测用户离开页面
使用react路由器v4,逻辑已经从注入路由器本身转移到组件中,我只在路由器v4上找到了以下功能:
BrowserRouter.getUserConfirmation
我有点困惑,为什么我应该将确认行为与路由器本身联系起来,而不是与特定组件链接!？
在离开我的组件(链接到我当前的路线)时,如何在处于某种状态时放置确认窗口？这似乎不受上述功能的支持.
如果用户单击浏览器中的后退按钮，如何显示自定义模式框。我已经有一个用于字段更改的模式框，但我不想使用 Prompt 的window.confirm.
目前，我正在使用ReactJS构建一个Web应用程序。该应用程序具有注册表。
现在考虑，用户已开始注册过程。但是在提交表单之前，用户离开了此注册页面。此时，说表单包含未保存的数据，我想显示一条确认消息，说您在离开此屏幕之前已保存了更改。
下面是我实现此目的的代码
componentDidMount () {
this.props.router.setRouteLeaveHook('/enterprise/enterprise-area/enterprise-details', this.routerWillLeave);
}
routerWillLeave(nextLocation) {
// return false to prevent a transition w/o prompting the user,
// or return a string to allow the user to decide:
if (true) {
return 'Your work is not saved! Are you sure you want to leave?';
}
}
export default withRouter(connect(
mapStateToProps,{
initializeVendorDetails
})(VendorRegistration));
我收到如下所示的错误：
Uncaught TypeError: Cannot assign to read only property '__id__' of /enterprise/enterprise-area/enterprise-details
我浏览了官方文档和github问题，但一无所获。谢谢您的期待。