有人知道为什么我的组件不断重新挂载吗?

Question

为什么我的组件不断重新安装它只是不断提醒成功，这意味着它处于无限循环中

我从使用效果中删除了依赖项，它停止了，所以我想其中一个依赖项一直在变化？请帮忙？ 如果您需要有关组件的更多信息或想要查看包含我所有数据的上下文文件，请告诉我。

useEffect(() => {
var parts = props.location.pathname.split('/');
var lastSegment = parts.pop() || parts.pop();
console.log('DOM is loaded');
console.log(lastSegment);
let searchNumber = Number(lastSegment);
// If items have been Set
if (trending.length > 1) {
handleDetail(searchNumber);
alert('success');
}
(async () => {
await domLoaded;
// alert('domLoaded');
setTimeout(() => {
if (trending.length > 1) {
setLoading(false);
}
}, 200);
})();
var category = detailProduct.category;
youMightLike(category);
setTimeout(() => {
setyouMightLikeItem(
//Random Item
youMightAlsoLike[Math.floor(Math.random() * youMightAlsoLike.length)]
);
console.log(youMightAlsoLike);
}, 300);
if (category !== 'love') {
switch (category.toLowerCase()) {
case 'mens fashion':
setyouMightlikeImg('fas fa-male');
break;
case 'mens shoes':
setyouMightlikeImg('fas fa-shoe-prints');
break;
case 'womens fashion':
setyouMightlikeImg('fas fa-female');
break;
case 'gadgets':
setyouMightlikeImg('fas fa-brain');
break;
case 'phone accessories':
setyouMightlikeImg('fas fa-mobile-alt');
break;
case 'pc':
setyouMightlikeImg('fas fa-laptop');
break;
case 'water pipes':
setyouMightlikeImg('fab fa-angellist');
break;
case 'smoke accessories':
setyouMightlikeImg('fas fa-cannabis');
break;
default:
alert('Fiya');
break;
}
}
setTimeout(() => {
if (category.toLowerCase().includes('mens')) {
setChoice('/mens');
} else if (category.toLowerCase().includes('womens')) {
setChoice('/womens');
} else if (category.toLowerCase().includes('phone')) {
setChoice('/phoneAccessories');
} else if (category.toLowerCase().includes('pc')) {
setChoice('/pc');
} else if (category.toLowerCase().includes('water')) {
setChoice('/waterpipes');
} else if (category.toLowerCase().includes('smoke accessories')) {
setChoice('/smokeaccessories');
} else if (category.toLowerCase().includes('smoke shop')) {
setChoice('/smoke');
} else {
setChoice('/searchProducts');
}
}, 300);
}, [detailProduct.category, handleDetail, props.location.pathname, trending.length, youMightAlsoLike, youMightLike]);

Answer 1

你看到的太多变化对于useEffect来说。每次更改其中任何一个内容时，都会运行 useEffect 并重新呈现组件。你应该分解你的逻辑，以便将非依赖状态分开到单独的useEffects((。此外，如果你正在寻找只运行一次的东西，你可以在useEffect的末尾放一个空数组。

Answer 2

必须将带有所有逻辑的"我的"按钮移动到不同的组件，如上面的答案所述

import React, { useContext, useEffect, useState } from 'react';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Link, withRouter } from 'react-router-dom';
import 'react-toastify/dist/ReactToastify.css';
import { ProductContext } from '../context';
const domLoaded = require('dom-loaded');
const RecomendedItem = props => {
const [youMightLikeItem, setyouMightLikeItem] = useState([]);
const [youMightlikeImg, setyouMightlikeImg] = useState(null);
const productConsumer = useContext(ProductContext);
const {
detailProduct,
youMightAlsoLike,
youMightLike
} = productConsumer;
const { category } = detailProduct;
let id = Number(props.match.params.id);
useEffect(() => {
if (1) {
youMightLike(category);
console.log(youMightAlsoLike, 'You Might Also Like');
if (category !== 'love') {
switch (category.toLowerCase()) {
case 'mens fashion':
setyouMightlikeImg('fas fa-male');
break;
case 'mens shoes':
setyouMightlikeImg('fas fa-shoe-prints');
break;
case 'womens fashion':
setyouMightlikeImg('fas fa-female');
break;
case 'gadgets':
setyouMightlikeImg('fas fa-brain');
break;
case 'phone accessories':
setyouMightlikeImg('fas fa-mobile-alt');
break;
case 'pc':
setyouMightlikeImg('fas fa-laptop');
break;
case 'water pipes':
setyouMightlikeImg('fab fa-angellist');
break;
case 'smoke accessories':
setyouMightlikeImg('fas fa-cannabis');
break;
default:
alert('Fiya');
break;
}
}
} // eslint-disable-next-line
}, [category, youMightAlsoLike.length, id]);
// !category, youMightAlsoLike.length, id
return (
<div>
<Link to={`/details/${youMightAlsoLike.id}`}>
<button className="like">
You might also like <i className={youMightlikeImg}></i>
</button>
</Link>
</div>
);
};
export default withRouter(RecomendedItem);