• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 서버로 보낸 get 요청이 무한히 전송되는 현상

서버로 보낸 get 요청이 무한히 전송되는 현상

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #54764

    머텅
    참가자
    안녕하십니까 선생님
    리액트 강의를 다 들은 후 연습삼아 음식 주문 웹서비스 같은걸 만들고 있는 완강생입니다.
    며칠째 해결 못하고 있는, 왜 그런지를 모르겠는 오류가 있어서 염치불고하고 가져왔습니다.
    부디 권위자의 눈으로 왜 그런 것인지 꿰뚫어주셨으면 좋겠습니다... (코드 아래 첨부)
    여러 페이지 중 하나의 페이지를 구성하는 jsx 파일입니다.
    여기서 axios.get 하는 코드가 있는데
    axios.get('/order/history').then((res) => {
        setOrderHistory(copy);
       })
    이 코드로 서버에 주문내역을 요청하는데, 그 윗줄에 있는 코드인 console.log('re'); 이게 계속 콘솔에 무한히 반복돼서 찍히길래
    이게 무슨 일인가 하고 크롬 개발자도구의 네트워크 탭에 가서 보니까 서버에서 계속 history를 받아오고 있었습니다.
    이게 아마 state가 바뀌면 다시 렌더링하니까 코드를 처음부터 다시 읽고... 이 과정을 계속계속 반복하는거 같은데..
    분명 선생님과 수업할때 신발 사진을 받아오는 경우에도 저렇게 .then() 안쪽에서 state를 바꿨었고 문제 없었던 거 같은데 
    왜 계속 리렌더링 하는 것일까요
    제발 한번만 살려주십시오 선생님...
    
    import { useEffect, useState } from "react"
    import "./orderHistoryPage.css";
    import Button from 'react-bootstrap/Button';
    import Modal from 'react-bootstrap/Modal';
    import {
      MDBCard,
      MDBCardBody,
      MDBCardTitle,
      MDBCardText,
      MDBCardHeader,
      MDBCardFooter,
      MDBBtn,
    } from 'mdb-react-ui-kit';
    import { Link } from 'react-router-dom'
    import { useSelector, useDispatch } from 'react-redux';
    import { setSeeModal } from '../../store';
    import axios from "axios";
    let clickedCard = {
      menu_nm: 'te',
      orderDateTime: '0000-00-00',
      customerName: 'chan',
      customerAddress: '동대문구',
      option_nm: '옵션',
      req_orderDateTime: '1111-11-11'
    }
    function OrderHistory() {
      let [orderHistory, setOrderHistory] = useState([1, 2, 3]);
      let [show, setShow] = useState(false);
      function showModal() {
        setShow(true);
      };
      function closeModal() {
        setShow(false);
      }
      console.log('re');
      axios.get('/order/history').then((res) => {
        setOrderHistory(copy);
       })
       
      return (
        <div>
          {show ? <HistoryModal closeModal={closeModal} /> : null}
          <Link to='/payment'>결제화면테스트</Link>
          <h2 className="text-center">주문내역</h2>
          {
            orderHistory.map((a, i) => {
              return (
                <>
                  <HistoryCard data={a} index={i} showModal={showModal} />
                </>
              )
            })
          }
        </div>
      )
    }
    function HistoryCard(props) {
      return (
        <div>
          <div className="d-flex justify-content-center">
            <MDBCard type='button' className="btn m-4 md" id={'card'+props.index} alignment='center' border="primary" style={{ width: '600px' }} onClick={
              (e) => {
                console.log(e.target.value);
                props.showModal();
              }
            }>
              <MDBCardHeader className="" >{props.data.시간}</MDBCardHeader>
              <div className="row">
                <MDBCardBody className="">
                  <MDBCardTitle>{props.data.menu_nm}</MDBCardTitle>
                  <MDBCardText>{props.data.menu_config}</MDBCardText>
                  <MDBBtn className="" href='#'>{props.data.price}</MDBBtn>
                </MDBCardBody>
              </div>
              <MDBCardFooter className='text-muted'>옵션</MDBCardFooter>
            </MDBCard>
          </div>
        </div>
      );
    }
    function HistoryModal(props) {
      return (
        <div className="black-bg">
          <div className="white-bg">
            <h4>hi</h4>
            <button className="btn btn-danger" id="close" onClick={props.closeModal}>닫기</button>
          </div>
        </div>
      )
    }
    export default OrderHistory
     
    #54786

    codingapple
    키 마스터
    컴포넌트가 재렌더링되면 그 안에 있는 코드도 다시읽습니다 
    ajax요청은 1회실행되는 useEffect안에서 쓰거나 합시다
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠