[Errorlog] Vaccine-life / 2021.08.25

1. 의료진 페이지 수정기능 반영

• api생성 요청 완. => medicalId를 url로 받고 request에는 contents만 담아서 PATCH메소드로 보냄
• 수정버튼 클릭시, 텍스트를 TextareaAutosize 로 변경시켜 그 자리에서 수정하기.

 

1. 수정버튼을 만들기
2. 버튼을 누르면 text가 TextareaAutosize로 변환되도록 하기
   • 즉, CommentList의 {props.contents}가 아니라 TextareaAutosize가 보여지도록 할 것.
3. 일단 버튼 토글 기능 구현
   • useState로 상태 관리, 초기값을 false로 두기
   • const [editable, setEditable] = React.useState(false);
   • handleToggle( ) { setEditable((edit) => !edit); (edit모드 반대로 바꾸는 코드 작성) }
   • 클릭시 변경을 일으킬 버튼에 onClick으로 적용하기
4. 뷰로 내려가서 삼항연산으로 editable이 true일 시, TextareaAutosize반환/ false일 시, {props.contents}(기존화면)반환 적용시키기
   
   • TextareaAutosize에 글 안써질 것임. 6번으로 가서 handleChange로 해결하기.
5. 토글버튼 뷰도 삼항연산으로 editable이 true일 시, faCheck 반환/ false일 시, faEdit 반환 적용
6. useState로 TextareaAutosize 상태 관리
   
   • const [text, setText] = React.useState("");
   • handleChange함수를 만들어 TextareaAutosize의 이벤트(e)를 받아와서 setText 에 넣어줌.
   • setText(e.target.value);
   • 그리고 handleChange함수를 TextareaAutosize에 onChange로 적용
7. 수정 버튼을 눌렀을 때, 기존 값들이 보이게 하기
   
   • editable이 false일 때, text는 기존내용이어야 하므로 setText에 medi_contents를 넣어 
   • 3번의 handleToggle함수에 적용
   • if (!editable) { setText(medi_contents); }
   • 하지만 아직 수정은 안됨~~~~~
8. 수정기능 구현
   • changeMedical함수 만들기
   • text가 없으면 알림창 뜨게하기
   • 아니면 dispatch(actionModifyMedical( medi_id, text )); 해주기
   • faCheck아이콘에 onClick으로 적용
   • 근데 415에러 떠서 text를 { text }로 바꿔줬더니 500에러 뜸
   • 다시 dispatch(actionModifyMedical(medi_id, { contents: text })); 로 변경하니 오류는 안뜸(관리자 Network를 보니 그냥 text로 넘겨주면 Form Data로 넘어가고 있었음. 백은 jason데이터로 받기로 되어 있어서 형식 맞춰서 { contents: text }로 수정한 것.)
   • 하지만 새로고침해야 수정 반영됨. => 화면에도 바로 반영되도록 수정리듀서 만들기

   • // 수정 리듀서
     actionModifyComment: (state, action) => {
       const { medicalId, contents } = action.payload;
       // console.log(action.payload);
       // 350 잘 나옴
       let idx = state.list.findIndex((c) => c.id === medicalId);
       // console.log(idx);
       // 근데 여기는 왜 -1 ?
       state.list[idx].contents = contents;
       },

   • CommentList컴포넌트에 dispatch(actionModifyComment({ medi_id, text }));도 추가해줌
   • 하지만 위 코드내용처럼 idx가 -1반환
   • 그래서 추가한 부분 주석처리하고, comment모듈의 비동기 수정인 actionModifyMedical에서 await 아래에 dispatch(actionModifyComment({ medicalId, contents })); 추가
   • action.payload에도 잘 들어가지고 idx도 잘 나오는데 Objects are not valid as a React child~라는 에러 발생
   • action.payload를 보니 contents안에 contents안에 변경텍스트가 들어감.
   • 따라서 수정 리듀서의 state.list[idx].contents = contents; 부분을 state.list[idx].contents = contents.contents; 로 변경
   • 수정했더니 잘 되긴 하지만 비동기가 리듀서보다 먼저 나와 변경되는 시간차로 지연 발생.
   • await 위로 dispatch(actionModifyComment({ medicalId, contents })); 위치 이동

완성!

•