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

您正在观看WAY太多更改而无法使用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);

有人知道为什么我的组件会不断重新安装吗？

2 个答案: