돌겠음 msw이용해서 fetch해서 데이터 filter돌리기 에러 무한 에러 .

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { cva } from 'class-variance-authority';
import { cn } from '@/utils/cn';
import LoginHeader from '../components/LoginHeader';
import BigLogoIcon from '@/assets/icons/BigLogoIcon';
import SearchIcon from '@/assets/icons/SearchIcon';

import { useQuery } from '@tanstack/react-query';

const fetchData = async (value:string) => {
  const response = await fetch('/searchbar');
  return response.json();
};

interface HeaderProps {
  changeNav: boolean;
}
/*dropwdown이름 겹침 -> ProductIcon 수정완료 */
const ProductIcon = cva(
  `
    block flex flex-col px-4 py-2 cursor-pointer
    `,
  {
    variants: {
      variant: {
        default: '',
        hover: 'hover:bg-slate-200 ',
      },
    },
  }
);

type filtereProps = string[] | number[];

const Header = ({ changeNav }: HeaderProps) => {
  const [isUser, setIsUser] = useState(true);
  //changeNav 임시 props - true:로그인 상태 false:비로그인 상태
  const [isOpen, setIsOpen] = useState(false);
  const [input, setInput] = useState("");
  const [filteredData, setFilteredData] = useState<filtereProps[]>([])

  useEffect(() => {
    const fetchData = async (value:string) => {
      try{
        const response = await fetch('/searchbar');
        if(response.ok){
          const data = await response.json();
          const filteredData = data.filter((e:{title:string; tag:string; nickname:string; userid?:number;}) =>{
            return(
              value &&
              e.title &&
              e.tag &&
              e.nickname &&
              (e.title.toLowerCase().includes(value.toLowerCase())) ||
              e.tag.toLowerCase().includes(value.toLowerCase()) ||
              e.nickname.toLowerCase().includes(value.toLowerCase())
            )
          });
          console.log(filteredData);
          setFilteredData(filteredData);
        } else {
          console.log('error', response.statusText);
        };
      } catch (error) {
        console.log('Error', error);
      }
    };
    fetchData('');
  }, []);

  const handleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const handleInput = (value:string)=> {
    setInput(value);
    // fetchData(value);
    console.log(value);
  };

  return (
    <nav className="sticky top-0 z-10 w-screen border-b border-gray-200 bg-white ">
      <div className=" mx-auto flex h-12 items-center justify-center space-x-6">
        <div className="hover:bg-slate-200">
          <Link to="/">
            <BigLogoIcon className="flex items-center" />
          </Link>
        </div>
        <ul className="flex space-x-5 p-3 font-medium">
          <li className="hidden w-full rounded-full hover:bg-slate-200 md:block md:w-auto">
            <a
              href="#"
              className="lr-4 block bg-transparent px-2 py-2 text-sm font-normal text-gray-500 "
            >
              About
            </a>
          </li>
          <li className="relative w-full md:w-auto">
            <button
              className="lr-4 block rounded-full bg-transparent px-2 py-2
                            text-sm font-normal text-gray-500 hover:bg-slate-200"
              onClick={handleDropdown}
            >
              Products
            </button>
            {isOpen ? (
              <div className="absolute left-1/2 top-full z-10 -translate-x-1/2 transform divide-y divide-gray-100 rounded-lg ">
                <ul className="w-52 divide-y divide-gray-100 rounded-lg border border-inherit bg-white pt-2 drop-shadow-lg">
                  <li>
                    <a className={cn(ProductIcon({ variant: 'hover' })) + 'px-1 py-2'}>
                      <span className="text-xs font-normal">Stack Overflow</span>
                      <span className="whitespace-normal text-xs font-light text-slate-500">
                        Public questions & answers
                      </span>
                    </a>
                  </li>
                  <li>
                    <a className={cn(ProductIcon({ variant: 'hover' })) + 'px-1 py-2'}>
                      <span className="text-xs font-normal">Stack Overflow for Teams</span>
                      <span className="whitespace-normal text-xs font-light text-slate-500">
                        Where developers & technologists share private knowledge with coworkers
                      </span>
                    </a>
                  </li>
                  <li>
                    <a className={cn(ProductIcon({ variant: 'hover' })) + 'px-1 py-2'}>
                      <span className="text-xs font-normal">Talent</span>
                      <span className="whitespace-normal text-xs font-light text-slate-500">
                        Build your employer brand
                      </span>
                    </a>
                  </li>
                  <li>
                    <a className={cn(ProductIcon({ variant: 'hover' })) + 'px-1 py-2'}>
                      <span className="text-xs font-normal">Advertising</span>
                      <span className="whitespace-normal text-xs font-light text-slate-500">
                        Reach developers & technologists worldwide
                      </span>
                    </a>
                  </li>
                  <li>
                    <a
                      className={cn(ProductIcon({ variant: 'default' })) + 'bg-gray-200 px-1 py-2'}
                    >
                      <span className="text-xs font-normal text-slate-400">About the compnay</span>
                    </a>
                  </li>
                </ul>
              </div>
            ) : null}
          </li>
          <li className="hidden w-full rounded-full hover:bg-slate-200 md:block md:w-auto">
            <a
              href="#"
              className="lr-4 block whitespace-nowrap bg-transparent px-2 py-2
                            text-sm font-normal text-gray-500"
            >
              For Teams
            </a>
          </li>
        </ul>
        <div className="w-96 items-center justify-between p-3" id="navbar-search">
          <div className="relative mt-1">
            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <SearchIcon className="fill-gray-400" />
            </div>
            <input
              type="text"
              id="search-navbar"
              className="block h-8 w-full border border-gray-300 p-2 pl-10
                        text-sm text-gray-900 placeholder-gray-400 focus:border-sky-200"
              placeholder="Search..."
              value={input}
              onChange={(e) => handleInput(e.target.value)}
            >
            </input>
              <ul className="bg-white p-5 border border-gray-500
              absolute w-full">
                {/* {
                  filteredData.map((item:{userid:number; title:string;}) => {
                    return <li key={item.userid}>{item.title}</li>
                  })
                } */}{input}
              </ul>
          </div>
        </div>
        <div>
          <LoginHeader changeNav={isUser} />
        </div>
      </div>
    </nav>
  );
};

export default Header;

데이터는 성공적으로 부름.. 

다만 입력 창을 통해 value에 값 넣고 애를 기준으로 필터 돌리려고 하면 에러 나옴. 

 

근데 지금은 또 왜 돌아가는데 ㅍ필터가 안 되지..?

 

 

 

해결 야팔 

    fetchData(input);
  }, [input]);

여기가 문제였음..근데 이거 그냥 fetch로 부른거라 react-query로 전환이 되나..