我显示的优惠券的列表基于类别选择使用使用使用效果和佐贺。
const initialState = {
is_loading: true,
coupon_data: [],
error_msg: '',
}
这是我的初始状态。is_loading
设置为真正的默认值,以便每当组件被访问时,它首先显示加载器,之后getCoupon()
从use效应
获得调度,它命中api并使用redux-saga异步获得响应,然后is_loading
设置为false,并根据响应coupon_data
或error_msg
得到更新。
这是一个组件:
const Couponlist = props => {
const [coupon, updateCoupon] = useState(null);
useEffect(() => {
if (props.coupon.is_loading) {
updateCoupon(<Loader />);
props.getCoupon(props.match.params.category)
} else if (!props.coupon.is_loading && props.coupon.coupon_data.length) {
const coupon_data = props.coupon.coupon_data.map(coupon => {
return (<div key={coupon.id} className="card" style={{ width: "18rem" }}>
<img className="card-img-top" src={coupon.banner}
alt={"Card image cap " + coupon.id} />
<div className="card-body">
<h5 className="card-title">Outlet : {coupon.outlet}</h5>
<p className="card-text">Category : {coupon.category}</p>
<p className="card-text">Merchant : {coupon.merchant}</p>
<p className="card-text">Price : {coupon.coupon_price}</p>
<p className="card-text">Valid From : {coupon.valid_from}</p>
<p className="card-text">Valid To : {coupon.valid_to}</p>
<p className="card-text">Trending : {coupon.trending}</p>
</div>
</div>)
})
updateCoupon(coupon_data);
} else if (!props.coupon.is_loading && props.coupon.error_msg !== '') {
updateCoupon(props.coupon.error_msg);
}
}, [props.match.params.category, props.coupon])
return coupon;
}
const mapStateToProps = state => {
return { coupon: state.coupon };
}
const mapDispatchToProps = dispatch => {
return {
getCoupon: category => dispatch(getCouponeInit(category))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Couponlist);
当组件第一次被访问时,正在加载
正在加载因此如果(道具优惠券正在加载)
将变为真,并且组件呈现加载程序并请求api获取数据。
从api获取数据后,加载设置为false,组件渲染优惠券数据。
现在的问题是,当用户单击另一个类别Couponlist
组件再次访问时,但这次正在加载
设置为false,并且存储了旧数据。因此,在这种情况下,请求新数据组件的过程只是简单地呈现旧的可用数据。
我如何处理这种情况?
您可以在UseEffect中添加函数来清理组件,尝试在函数UseEffect的底部添加该函数
() => { your clean up code here }
这是react项目中的bootcamp.js文件 console.log(训练营)显示未定义。Plzz帮助
我正在尝试使用Thymeleaf呈现电子邮件模板,我希望主题和正文在同一个文件中,但分别呈现。我不想使用spring视图,只想使用普通的。 这有几个问题 首先,我无法获取Thymeleaf仅渲染
一个组件,它呈现已填好的表单的预览,当您单击左侧的表单时,它会在右侧显示它们。 第一个handleSwitchReview向我抛出了React钩子,所呈现的钩子比上一个呈现错误时要多 第二个不是。当我控制台日志道具,例如,我得到他们4-5次时,第一个函数的视图显示,但没有第二次,第二次只显示1次在控制台日志。 尝试移动setState并在控制台中记录父组件,但这个组件是唯一一个启动了很多次并中断的
问题内容: 我正在学习有关如何使用钩子注册事件的Udemy课程,讲师给出了以下代码: 现在效果很好,但我不认为这是正确的方法。原因是,如果我理解正确,则每次重新渲染时,事件都会每次都在注册和注销,并且我根本认为这样做不是正确的方法。 所以我对下面的钩子做了一些修改 通过使用一个空数组作为第二个参数,使组件只运行一次效果,即模仿。当我尝试结果时,奇怪的是,在我键入的每个键上都没有附加,而是被覆盖了。
如何使用钩子(或任何其他钩子)来复制? 在传统的类组件中,我将执行以下操作: 使用hook: (完整示例:https://codesandbox.io/s/2oo7zqzx1n) 这不起作用,因为在中返回的“cleanup”函数捕获装载期间的道具,而不是卸载期间的道具状态。 如何在不运行函数体(或清除)的情况下对每个道具更改进行清理? 一个类似的问题并没有涉及获得最新道具的部分。 文件状态为: 如
我有一个组件,我在其中调用我的自定义钩子。 自定义钩子如下所示: 而我在其中使用的导致错误的组件是: 有什么想法吗?