TIL_43_221228

43일 차
투두리스트 수정 후 리셋되는 현상

투두리스트 수정 후 리셋되는 현상

투두리스트 수정버튼 누르면 수정후에 값이 사라지는현상

const [editValue, setEditValue] = useState({
     id ,
		  userId ,
		  title ,
		  content ,
		  doneDate ,
		  schedule ,
  });

  const { editContent, editTitle, editDoneDate, editUserId, editSchedule } =
    editValue;

  const onSubmitEdittedTodo = (e) => {
    e.preventDefault();

    const passwordForModifying = window.prompt(
      '수정을 위해 비밀 번호를 입력해 주세요.'
    );

    if (passwordForModifying === sameIdTodos.userPw) {
      dispatch(
        __modifyEdittedTodo({
          id: todoId,
          userId: editUserId,
          title: editTitle,
          content: editContent,
          doneDate: editDoneDate,
          schedule: editSchedule,
        })
      );

    
      window.confirm('수정이 완료되었습니다.');
    } else {
      alert('비밀번호가 틀렸습니다.');
     
    }
  };

  useEffect(() => {
    dispatch(__getTodos());
  }, [dispatch]);

원인

변경되기전에 값에 아무 값도 넣지 않고 변경될 값에도 아무값을 넣지 않아 모든 값이 사라진것.

 id ,
  userId ,
  title ,
  content ,
  doneDate ,
  schedule ,

해결

변경되기전엔 기존에 있던 값들을 가져오고, 변경될 값에는 입력된 값을 넣어야 한다.

const [editValue, setEditValue] = useState({
    editContent: todosContent,
    editTitle: todosTitle,
    editDoneDate: todosDoneDate,
    editUserId: todosUserId,
    editSchedule: todosSchedule,
  });

  const { editContent, editTitle, editDoneDate, editUserId, editSchedule } =
    editValue;

  const onSubmitEdittedTodo = (e) => {
    e.preventDefault();

    const passwordForModifying = window.prompt(
      '수정을 위해 비밀 번호를 입력해 주세요.'
    );

    if (passwordForModifying === sameIdTodos.userPw) {
      dispatch(
        __modifyEdittedTodo({
          id: todoId,
          userId: editUserId,
          title: editTitle,
          content: editContent,
          doneDate: editDoneDate,
          schedule: editSchedule,
        })
      );

      setEditValue({
        ...editValue,
        editContent: editContent,
        editTitle: editTitle,
        editDoneDate: editDoneDate,
        editUserId: editUserId,
        editSchedule: editSchedule,
      });

      window.confirm('수정이 완료되었습니다.');
    } else {
      alert('비밀번호가 틀렸습니다.');
      setEditValue({
        ...editValue,
        editContent: todosContent,
        editTitle: todosTitle,
        editDoneDate: todosDoneDate,
        editUserId: todosUserId,
        editSchedule: todosSchedule,
      });
    }
  };

  useEffect(() => {
    dispatch(__getTodos());
  }, [dispatch]);

해결후

리액트 상태변경에 조금 이해 한듯하다!뿌듯