728x90
todolist 에서 수정기능을 구현중이다.
근데 api주소도 맞고 아무 이상이 없는데 계속 400에러가 떳다.
예상되는 문제는
수정되는 input 내용이 없어서 console이 안찍히는거 같았다.
그래서 밑에 input창을 하나 만들고 아무거나 찍은후 수정버튼을 누르니 정상 작용한다.
내용도 수정되었다.
이제 해결해야할부분은
내가 구현하려는건 수정버튼을 누르면 input창이 뜨면서 입력한 값으로 수정이 되는거다.
현재는 반대현상이라고 표현할수있을것 같다.
일단 내가 더 진행해야 할 방향은
방향을 좀 바꿔야할것같다.
현재처럼 하지말고
수정버튼을 누르면 input창과 제출버튼이 나오고
제출버튼을 onClick하면 저 함수가 이루어지게 해야한다.
일단 현재까지의 코드를 올려야겠다.
todo
import { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";
import TodoList from "../Todo/TodoList";
const Body = styled.div`
border: 10px solid black;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
`;
const Container = styled.div`
border: 10px solid blue;
/* color: blue; */
width: 600px;
height: 600px;
`;
const TitlePart = styled.div`
border: 3px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> p {
font-size: 30px;
font-weight: 500;
}
`;
const InsertPart = styled.div`
display: flex;
flex-direction: row;
padding-bottom: 10px;
`;
const BodyPart = styled.div`
border: 3px solid green;
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
`;
// const ListStyle = styled.li`
// list-style: none;
// `;
function Todo() {
const [addInput, setAddInput] = useState("");
const [todos, setTodos] = useState([]);
// const [showEdit, setShowEdit] = useState(false);
// console.log(todos);
useEffect(() => {
const access_token = localStorage.getItem("access_token");
axios
.get(`${process.env.REACT_APP_API_URL}/todos`, {
headers: {
Authorization: `Bearer ${access_token}`,
},
})
.then(res => {
console.log(res.data);
setTodos(res.data);
})
.catch(err => console.error(err));
}, []);
const handleAdd = () => {
const access_token = localStorage.getItem("access_token");
axios
.post(
`${process.env.REACT_APP_API_URL}/todos`,
{
id: todos.length + 1,
todo: addInput,
isCompleted: false,
userId: todos.length + 1,
},
{
headers: {
Authorization: `Bearer ${access_token}`,
"Content-Type": "application/json",
},
}
)
.then(res => {
// console.log(res);
setTodos([...todos, res.data]);
setAddInput(" ");
})
.catch(err => console.error(err));
};
return (
<>
<Body>
<Container>
<TitlePart>
<p>Todo List</p>
<InsertPart>
<input
type="text"
data-testid="new-todo-input"
onChange={e => setAddInput(e.target.value)}
></input>
<button
data-testid="new-todo-add-button"
onClick={() => handleAdd()}
>
추가
</button>
</InsertPart>
</TitlePart>
<BodyPart>
<TodoList todos={todos} setTodos={setTodos} />
</BodyPart>
</Container>
</Body>
</>
);
}
export default Todo;todolist
import axios from "axios";
import { useState } from "react";
// import EditShow from "./EditShow";
// import { useParams } from "react-router-dom";
function TodoList({ todos, setTodos }) {
const [updateInput, setUpdateInput] = useState("");
// let { id } = useParams();
// console.log(todos);
const handleDelete = id => {
const access_token = localStorage.getItem("access_token");
axios
.delete(`${process.env.REACT_APP_API_URL}/todos/${id}`, {
headers: {
Authorization: `Bearer ${access_token}`,
},
})
.then(res => {
// console.log(res);
setTodos(todos.filter(obj => obj.id !== todos.id));
window.location.reload();
})
.catch(err => console.error(err));
};
const handleUpdate = id => {
console.log(todos);
const access_token = localStorage.getItem("access_token");
axios
.put(
`${process.env.REACT_APP_API_URL}/todos/${id}`,
{
todo: updateInput,
isCompleted: false,
},
{
headers: {
Authorization: `Bearer ${access_token}`,
"Content-Type": "application/json",
},
}
)
.then(res => {
console.log(res);
//setUpdateInput 이게 값이 없어서 계속 에러가 난거다.
})
.catch(err => console.error(err));
};
return (
<div>
{todos.map((el, i) => {
return (
<li key={i}>
<label>
<input type="checkbox" />
<span>{el.todo}</span>
</label>
<button
data-testid="modify-button"
onClick={() => handleUpdate(el.id)}
>
수정
</button>
<button
data-testid="delete-button"
onClick={() => handleDelete(el.id)}
>
삭제
</button>
</li>
);
})}
<input onChange={e => setUpdateInput(e.target.value)}></input>
</div>
);
}
export default TodoList;728x90
'부트캠프교육중 > react' 카테고리의 다른 글
| [코딩애플] 1~3강 (0) | 2023.06.22 |
|---|---|
| [todolist]수정기능 구현중2 (0) | 2023.06.17 |
| 작업시 기본틀(계산기형태) (0) | 2023.06.13 |
| 코드분할, lazy, suspense (0) | 2023.03.25 |
| Custom Hook 실습 (0) | 2023.03.23 |