>source

선택한 브랜드에 따라 제품을 필터링하는 필터가 있지만 이 오류가 계속 발생하는 이유를 모르겠습니다. 경고: 최대 업데이트 깊이를 초과했습니다. 이는 구성 요소가 useEffect 내부에서 setState를 호출하지만 useEffect에 종속성 배열이 없거나 종속성 중 하나가 렌더링할 때마다 변경될 때 발생할 수 있습니다. 제가 여기서 무엇을 할 수 있는지 제안해 주시겠습니까?

내 React 구성 요소:

import React from 'react';
import "./home.css";
import Filter from '../filter/Filter';
import Item from '../item/Item';
import { colors, products } from '../../data';
import { useState } from 'react';
import { useEffect } from 'react';
function Home(props) {
    console.log(props);
    const [list, setList]= useState(products);
    const [brands, setBrands]= useState([
      {
        id: 22,
        name: "US Polo Assn",
        value: "usPoloAssn",
        checked: false,
      },
      {
        id: 23,
        name: "Wrangler",
        value: "wrangler",
        checked: false,
      },
      {
        id: 24,
        name: "H &
 M",
        value: "h&
m",
        checked: false,
      },
      {
        id: 25,
        name: "Vermo Moda",
        value: "vermoModa",
        checked: false,
      },
      {
        id: 26,
        name: "Jack &
 Jones",
        value: "jack&
jones",
        checked: false,
      },
    ]);
    const handleChangeChecked= (id)=> {
        const brandsStateList= brands;
        const changeCheckedBrands= brandsStateList.map((item)=> item.id=== id ? {...item, checked: !item.checked} : item);
        setBrands(changeCheckedBrands);
    }
       const applyFilters= ()=> {
           let updatedList= products;
           const brandChecked= brands.filter((brand)=> brand.checked).map((brand)=> brand.name);
           if(brandChecked){
             updatedList= updatedList.filter((item)=> brandChecked.includes(item.brand));
           }
           setList(updatedList);
        }
       useEffect(()=> {
        applyFilters();
       },[brands]);
  return <div className='container'>      <div className="home">          <div className="left">            <Filter brands={brands} colors={colors} changeChecked={handleChangeChecked}  />          </div>          <div className="right">            <div className="items">                {list.map((prod)=> {
                    return <Item key={prod.id} product={prod} />;
                })}
          </div>          </div>      </div>  </div>;
}
export default Home;

내 필터 구성 요소:

import React from 'react';
import "./filter.css"
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import Checkbox from "@mui/material/Checkbox";
import FormGroup from "@mui/material/FormGroup";
function Filter(props) {
    console.log(props);
  return (
    <div className='filter-container'>      <FormGroup>        <FormLabel id="formLabel">Brand</FormLabel>        {props.brands.map((brand)=> {
            return <FormControlLabel key={brand.id} control={<Checkbox checked={brand.checked} onChange={()=> props.changeChecked(brand.id)} value={brand.value}/>} label={brand.name} />;
        })}
      </FormGroup>   </div> );
 }
 export default Filter;

내 항목 구성 요소:

import React from 'react';
import "./item.css"
function Item(props) {
  return (
    <div className="item-container">      <div className="item">        <img
          src={props.product.img}
          alt=""
        />        <h2>{props.product.brand}</h2>        

{props.product.name}

<small>{props.product.price}</small> </div> </div> ); } export default Item;

필터 및 항목 구성 요소도 추가할 수 있습니까?

Priyank Kachhela2022-02-03 14:17:28

방금 업데이트했습니다 :))

Red Cloud2022-02-03 14:21:16

useEffect에서 브랜드를 호출하여 모든 변경 사항을 확인하고 있습니까?

undefined2022-02-03 14:24:49

내 필터는 확인란이므로 특정 브랜드의 checked 속성이 변경되었음을 확인할 때마다 예, useEffect에서 브랜드를 종속 목록으로 추가하여 브랜드 목록의 모든 변경 사항을 확인하고 있습니다.

Red Cloud2022-02-03 14:41:31
  • 이전 qt : 속성 "텍스트"에 대해 바인딩 루프가 감지되었습니다.
  • 다음 gcc : Cmake 링커 스크립트가 적절한 라이브러리를 찾을 수 없습니다