문제사항
서버로부터 get한 더미데이터와 추가된 데이터를 App.js 파일에서 받고, 이것을 Data.js 파일에서 props로 내려 받아서 map 메서드를 사용해서 뿌려주었다.
그리고 Data.js 에는 Modal.js 파일이 조건에 따라 열리게 구현을 했고, 이 Modal.js 파일에서 수정 버튼을 누르면 해당하는 데이터가 나오고, 수정하기 버튼을 누르면 서버로 데이터를 받아서 이를 App.js에서 받고 이를 Data.js 파일에서 props로 내려 받는 구조입니다.
여기서 문제는 Modal.js 에서 수정하기 버튼을 누르면, 서버에서는 patch로 받아서 데이터를 잘 받지만, 이상하게도 화면상에는 맨 아래 데이터로 붙으면서 수정 기능을 제대로 하지 못했다.
오류해결
며칠 밤낮을 고통스러워 하다가, 콘솔을 찍어보니 id 가 undefined 라는 사실을 알았다.
그리고, Modal.js 에서 서버로 데이터를 보낼때, id를 포함해서 보내주었다.
그랬더니 해결!
앞으로 해야 할 일
1. 목록의 CSS를 손봐서 더 보기 편하게 만들어야겠다.
Styled-components를 사용할지 말지 고민중이다.
지금 js 파일이 너무 길어서 더 효율적인 방법을 찾아서 수정하고 싶다.
2. 유저가 수정을 하려고 고치기 버튼을 눌렀지만 마음이 바뀌어서 모달창을 닫으면 해당하는 목록만 나오는 문제점이 있다.
이 문제도 해결하기
3. 필터링 기능 추가하기
4. 그래프로도 나타내보기
수정할 데이터를 보내는 코드
const updateSubmitHandler = async (id) => {
if (story.trim().length === 0) {
return;
}
const inputData = {
// id: dataId,
date: new Date(date),
weight: weight,
photo: photo,
exercise: exercise,
story: story,
id: id,
};
const updateResponse = await axios.patch("/data", inputData);
setData(updateResponse.data);
};
서버에서 수정하는 데이터 받는 코드
app.patch("/data", (req, res) => {
console.log(req.body.id);
const idx = dummyData.findIndex((d) => d.id === req.body.id);
const updated = {
...dummyData[idx],
...req.body,
};
dummyData.splice(idx, 1, updated);
res.status(201).json(dummyData);
});
