[英]Getting 'Can't perform a React state update on an unmounted component' before useEffect cleanup function executes
[英]Warning: Can't perform a React state update on an unmounted component. useEffect cleanup function
如何解決這個問題呢?
//ReviewProductDetail.jsx:
第一次從該組件獲取頁面
import React, { useEffect, useState } from 'react';
import RatingCardProductDetail from '../../components/RatingCardProductDetail';
import "./style.sass";
import FilterReviewProductDetail from '../../components/FilterReviewProductDetail';
import { Row, Col, Pagination, Spin } from 'antd';
import LatestReview from '../../components/LatestReview';
import strings from '../../localization/localization';
import Product from '../../repository/Product';
function ReviewProductDetail({ productId }) {
const [reviewRatingDetail, setReviewRatingDetail] = useState({})
const [reviewRating, setReviewRating] = useState([])
const [notFound, setNotFound] = useState(false)
const [loading,setLoading] = useState(false)
useEffect(() => {
getReviewRatingDetail();
getReviewRating();
}, [])
async function getReviewRatingDetail() {
let reviewRatingDetail = await Product.reviewRatingDetail({
productId: productId
})
if (reviewRatingDetail.status === 200) {
setReviewRatingDetail(reviewRatingDetail)
} else {
setReviewRatingDetail({})
}
}
async function getReviewRating() {
let reviewRating = await Product.reviewRating({
productId: productId,
loading: setLoading
})
if (reviewRating.status === 200) {
setReviewRating(reviewRating)
setNotFound(false)
} else {
setReviewRating([])
setNotFound(true)
}
}
return (
<Spin spinning={loading}>
<div className="mp-review-product-detail">
{notFound ?
<div className="mp-product-detail__not-found">
<span>
Belum ada ulasan untuk produk ini
</span>
</div> :
<React.Fragment>
<RatingCardProductDetail reviewRatingDetail={reviewRatingDetail} />
<Row>
<Col md={17} offset={3}>
<div className="mp-review-product-detail__filter">
<FilterReviewProductDetail />
</div>
</Col>
</Row>
<h3>{strings.latest_review}</h3>
{reviewRating.review &&
reviewRating.review.map((review, i) => {
return <LatestReview key={i} review={review} />
})}
<Pagination
className="mp-pagination-review-product-detail"
defaultCurrent={1}
total={5} />
</React.Fragment>}
</div>
</Spin>
);
};
export default ReviewProductDetail;
那么這是一個調用數據API的組件,
async function reviewRatingDetail(props) {
const loading = props.loading ? props.loading : function () { };
const productId = props.productId;
// const decodeURL = decodeURI(productId)
const idProduct = productId.replace(/ /g, '')
let response = "";
loading(true);
try {
response = await apiGetWithoutToken(`${PATH_PRODUCT.PRODUCT}/${idProduct}/${PATH_PRODUCT.PRODUCT_REVIEW_RATING_DETAIL}`);
response = jmespath.search(response, productsReviewDetail);
loading(false);
} catch (error) {
response = jmespath.search(error.response, productsReviewDetail);
loading(false);
}
return response;
}
async function reviewRating(props) {
const loading = props.loading ? props.loading : function () { };
const productId = props.productId;
//const decodeURL = decodeURI(productId);
const idProduct = productId.replace(/ /g, '');
let response = "";
loading(true);
try {
response = await apiGetWithoutToken(`${PATH_PRODUCT.PRODUCT}/${idProduct}/${PATH_PRODUCT.PRODUCT_REVIEW}`);
response = jmespath.search(response, productsReview);
loading(false);
} catch (error) {
response = jmespath.search(error.response, productsReview);
loading(false);
}
return response;
}
/** 無令牌服務 api getWithoutToken */
export const apiGetWithoutToken = (url, params = null) => {
return serviceWithoutToken().get(url, {
params: params
});
};
export const serviceWithoutToken = () => axios.create({
baseURL: REACT_APP_API_SERVICE,
timeout: 60 * 4 * 1000,
headers: {
"Content-Type": `application/json`,
}
});
我想向您尋求幫助,如何擺脫這些錯誤標記。 請直接舉個例子謝謝
嘗試使用 useEffect 添加這個:
useEffect(() => {
getReviewRatingDetail();
getReviewRating();
}, [productId])
或整個 function ReviewProductDetail 使用 useCallback ( https://reactjs.org/docs/hooks-reference.html#usecallback )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.