警告：无法在没有 useEffect 的情况下对未安装的组件执行 React state 更新

Question

Hello guys I have a basic component that takes product info and render it. It has a method called onAaddToWishList which takes product id, fetches the data from API and adds it to my wishlist.

const Product = (props) => {
    const [loading, setLoading] = useState(false);

    const onAddToWishlist = (e, id) => {
        e.preventDefault();

        if (!loading) {
            setLoading(true)

            instance.get(`/products/product/${id}`, {
                headers: {
                    'X-Auth-Token': findToken()
                }
            })
                .then(response => {
                    if (response.data.food) {
                        alert('Product added')

                        props.addToWishlist(response.data.food);

                        console.log(response.data.food)
                    }
                    else {
                        alert('Product not found')
                    }

                    setLoading(false);
                })
                .catch(err => {
                    console.log(err)

                    setLoading(false);

                    alert('Error occured.try again')
                })
        }
    }

    return (
        <div className="ProductCard">
            <div className="ProductCard--Image">
                <img src={props.image} alt="iclereu" />
            </div>
            <div className="ProductCard--Container">
                <h1>{props.title}</h1>
                <p>{props.description}</p>
                <span>&#8380; {props.price}</span>
                <div className="ProductCard--Nav">
                    <div className="ProductCard--Link">
                        <Link to="/">View more</Link>
                    </div>
                    <div className="ProductCard--Link">
                        <a
                            onClick={(e) => onAddToWishlist(e, props.id)}
                            href="#"
                        >
                            {!loading ? "+Wishlist" : "Loading..."}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        wishlist: state.wishlist
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToWishlist: (product) => dispatch(wishlistActions.addToWishList(product))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Product)

This is my addToWishList action:

const addToWishList = (product) => {
    return dispatch => {
        let wishlist = [...store.getState().wishlist];
        let exists = wishlist.find(prod => prod.product._id === product._id);

        if (!exists) {
            wishlist = [...wishlist, {
                product: product,
                count: 1
            }]
        }
        else {
            let index = wishlist.findIndex(prod => prod.product._id === product._id);
            wishlist[index].count++;
        }

        dispatch({ type: "ADD_TO_WISHLIST", wishlist: wishlist })
    }
}

props.addToWishlist is function for redux action(it saves data to redux store( wishlist )). Problem is whatever I do inside this action I get the following warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

But I don't use useEffect hook. It works actually(it adds a product to wishlist ) but the warning is pretty annoying like I do something wrong. Even I console the argument of the redux action it gives the same error. I would be grateful if someone helps me

Answer 1

The reason is that props of your component are changing (wishlist) component is rerendering and in this time setLoading is trying to update the state of the unmounted component. For this example, useEffect is not really useful. The quickest solution is to keep the loading state in redux store as well and remove const [loading, setLoading] = useState(false); from this component. Also, it worth mentioning, that it's better to decompose presentation and API interaction. I can recommend you two simple approaches for redux: https://www.npmjs.com/package/redux-api-middleware and https://www.npmjs.com/package/redux-thunk