使用useEffect挂钩呈现内容时出现问题

Question

我显示的优惠券的列表基于类别选择使用使用使用效果和佐贺。

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，并且存储了旧数据。因此，在这种情况下，请求新数据组件的过程只是简单地呈现旧的可用数据。

我如何处理这种情况？

Answer 1

您可以在UseEffect中添加函数来清理组件，尝试在函数UseEffect的底部添加该函数

() => { your clean up code here }