TIL(41)

1.만난 문제 (오류도 아니였음 진짜 문제였음)😿

  db.json연결을 다하고 post로 내 글을 보내는것까지 성공을 했다.

 근데 콘솔에 찍어보니까 이상했다. state변경될때마다 post가 되고 있는거였다. 그러다 보니까 데이터 입력할때동안 계속해서 post가 되  어서 

 이런식의 문제가 생겼다.

아무래도 내가 useSelect에서 article이라는 이름으로 state를 들고왔는데 얘가 실시간으로 변경될때마다 리렌더링이 되므로

json-server에도 똑같이 리렌더링이 될때마다 글이 올라가는 것 같다라는 생각이 들었다.

 

2.시도🔥

그럼 이미 변경되고 있는 state가 아니라 setState를 통해서 변경이 되어진 state를 보내자!

그럼 일단 <form>안에 있는 버튼이 눌리면 onsubmit이 실행되고 있었는데 그 안에 dispatch를 실행하는 함수와 post로 가는 함수가

두 개나 들어가게되었다.

그러다보니 코드도 보기 복잡하고 실행도 엉켰다.

 

그래서 handleSubmit(post로 보내는 함수)=()=>{

 여기 안에 Post 를 하고 .then(여기다가 dispatch하는 함수를 적었다.)}

//post함수
handleSubmit=()=>{

 여기 안에 Post 를 하고.then(여기다가 dispatch하는 함수를 적었다.)}

실행결과 갑자기 썰물오듯 오류가 빗발쳤다.

아직 습관이 안되어있지만 오류가 나면 캡쳐해야지

 

3.해결🌟

나는 지금 카테고리값과 주제 +사용자+비밀번호+내용 이렇게 많은 내용을 보내야했기때문에

이 내용들을 하나의 변수로 만드는 작업을 했다.

cosnt[title,setTitle]=useState("")
.
.
.

const submitHandler = (e) => {
    e.preventDefault();
    const arc = {   //필요한 내용들을 객체로 만든다.
      title,
      userName,
      selected,
      pwd,
      content,
      date: today.toLocaleString(),
    };
    axios.post("http://localhost:3000/posts", arc).then(() => {
      alert("업로드 완료");
      window.location = "/";   //글목록페이지로 간다.
    });
  };

이렇게 해서 깔끔하게 올라가는 것을 확인했다.

 

4.알게된거🧐

가지고 있는 데이터가 많은거 하나씩 보낼생각하지 말고 묶어서 깔끔하게 보내자

진작에 알았으면 밤에 잠도 못자고 그런 고생을 안했을텐데ㅋㅋ이렇게 또 하나를 배워갑니다.

그리고 구글링을 하면서 여러개를 읽어보고 취합해서 가져와보자라는 것도 배웠다.

부분 부분 필요에 따라서 가져와가지고 내 프로젝트에 잘 취합 해보는것도 좋은 능력인것같다.

그리고 거기서 좋은부분만 따로 떼와서 써먹을줄도 알아야하는것같다. 영어공부하자!