我正在显示基于使用useEffect和saga选择的类别的优惠券列表。
const initialState = {
is_loading: true,
coupon_data: [],
error_msg: '',
}
这是我的初始状态。 is_loading设置为true默认值，以便每当访问组件时，它首先显示加载程序，然后getCoupon()从useEffect派发，该命中api并使用redux-saga异步获取响应，然后{{ 1}}设置为false，并根据响应is_loading或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);
为is_loading，因此true变为true，组件渲染加载程序并请求api进行数据访问。
从api if (props.coupon.is_loading)获取数据后，设置为false，然后组件呈现优惠券数据。
现在的问题是，当用户再次单击另一类别is_loading组件时，但是这次Couponlist设置为false，并且存储中还有旧数据。因此，在这种情况下，无需再请求新的数据组件，只需渲染旧的可用数据即可。
如何处理这种情况？
答案 0 :(得分：0)
您可以在UseEffect内添加函数以清理您的组件，请尝试将其添加到函数useEffect的底部
() => { your clean up code here }