항해99 27일차

과제를 제출했다..!

 

수정페이지까지 마무리 하게 되어서 너무 기쁘다..뿌듯하다..!!!!!!!!!!!!!!!!!!!!!

 

도와주신 민경님, 연재님, 주형님 그리고 찬수님...!!정말 감사합니다ㅜㅜㅜㅜ

 

**꼭 기억하고 싶은것

오류..

수정페이지를 만들면서 원래 있던 카드의 값을 수정페이지로 넘겨서 수정페이지에서 그려줘야 했다.

카드에 입력했던 값들 중에서 id값을 가져와서 id값이 카드값과 같으면 리턴해주는 식으로 제작했다.

 

그래서 인풋에 각각의 값을 넣어주어야 했는데 인풋의 value={}이런식으로 했더니 오류가 났다.

찬수님이 리액트에서는 value가 아니고 default value로 써주어야 한다고 말씀해 주셨다ㅜㅜ!

 

그래서 default value={}로 써주니까 오류가 안나는 것..잊지말자!!!

 

 

엄청 헷갈렸던 수정페이지 리턴

<Wrap>
            <h5 style={{ color: "#858483" }}>단어 수정하기</h5>
            {dic_list.map((l, i) => {
                // console.log(l,i)
                if (params.id === l.id) { // 파라미터로 넘겨준 아이디 값과 맵을 돌려서 나온 리스트의 아이디 값이 같으면 리턴
                    return (
                        <div className="Box" key={i}>
                            <Box >
                                <Word>단어</Word>
                                <Input type="text" ref={my_input} defaultValue={l.word} onChange={onChange}/> //입력값이 잘 들어오는 지를 콘솔에 찍어보려고 onChange를 달아주었다.
                            </Box>
                            <Box>
                                <Word>설명</Word>
                                <Input type="text"  ref={my_input2} defaultValue={l.meaning} onChange={onChange}/>
                            </Box>
                            <Box>
                                <Word>예시</Word>
                                <Input type="text"  ref={my_input3} defaultValue={l.example} onChange={onChange}/>
                            </Box>
                            <ButtonDiv>
                                <Button2 onClick={() => {
                                    history.push("/")
                                }}>뒤로가기</Button2>
                                <Button onClick={() => {
                                        dispatch(updateDictionaryFB({ //디스패치해주기 ref로 관리하는 인풋 값을 가지고 와서 데이터로 넘겨주기!
                                            id:params.id ,word:my_input.current.value, meaning:my_input2.current.value, example:my_input3.current.value}));
                                        history.push("/") 
                                }}>수정하기</Button>
                            </ButtonDiv>
                        </div>
                    );
                }
            })}

        </Wrap>

 

+수정페이지에서 수정해주고 수정하기 버튼을 누르면 메인페이지로 수정한 값이 넘겨져서 바로 보여야 하는데 넘어가기만 하고 값이 보이지 않았다..새로고침을 하면 수정한 값이 나왔다.

 

어디가 문제인지 감이 안왔었는데 찬수님이 해결해주셨다..ㅜㅜㅜ너무 감사..ㅜㅜㅜ

 

내가 작성했던 코드들

export const updateDictionaryFB = (dictionary) => {
  console.log(dictionary);
  return async function (dispatch, getState) {
    const docRef = doc(db, "dictionary", dictionary.id);
    await updateDoc(docRef, {word: dictionary.word, meaning: dictionary.meaning, example: dictionary.example});

    console.log(getState().dictionary);
    const _dic_list = getState().dictionary.list;
        const dic_index = _dic_list.findIndex((d)=>{
            return d.id === dictionary.id;
        })
        dispatch(updateDictionary(dic_index));
  }
}

 

 case "dictionary/UPDATE": {
      const new_dictionary_list =state.list.map((l,idx)=>{
          
          if (parseInt(action.dictionary_index) === idx){
              return {...l, completed: true};
          } else {
              return l;
          }
      });
      console.log({ list: new_dictionary_list });
      return {list:new_dictionary_list};
  }
    default: return state;
  }

 

찬수님이 떠먹여주신 코드...

 수정된 값을 넣어주지 않았고,

수정된 리스트를 새로 리턴해주지 않아서 생긴 문제였다....

오늘도 배워갑니다!!!!!!!!!!!

---

리액트 기초2주차 과제를 마쳤다..!

사실 이번주에 과락나면 나는 자진하차다 하는 생각으로 정말 어느때보다 최선을 다했다. 그리고 이렇게 결과물이 나와서 다행이고 감사하다. 재밌고 좋아서 내가 시작한 일이니 후회없도록 더 노력해야겠다! 내일도 다음주도 앞으로도 화이팅이당👏👏👏👏👏