inflearn logo
Khóa học

Khóa học
Chia sẻ kiến thức

Bài viết của Jang Jaehoon

Jang Jaehoon Jang Jaehoon

@jjhgwx

Số lượng đánh giá đã viết
1,217
Xếp hạng trung bình
4.9

Bài viết 43

Hỏi & Đáp

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

PostDetail.js에서 수정화면으로 넘어가는 버튼에서 값을 수정해봐도 잘 안들어가지네요. /posts/edit/${post.id} } className={"edit-button"}> 編集 혹은 /posts/edit/${id} } className={"edit-button"}> 編集 이 두 가지 방법 모두 화면 이동이 안되는 상황입니다.

Lượt thích
0
Số bình luận
6
Lượt xem
80

Hỏi & Đáp

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

import {Link, useParams, useNavigate} from "react-router-dom"; import {useEffect, useState} from "react"; import "./css/edit.css"; import axios from "axios"; let PostEdit = () =>{ const{id} = useParams(); // useParam : React RouterからURLパスのparameterを持って来る。 const navigate = useNavigate(); // Page이동에 사용함. let[title, setTitle] = useState(""); let[content, setContent] = useState(""); // let[post,setPost]=useState({ // title:"", // content:"" // }) let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); useEffect(()=>{ // setTitle( ${id}'s name ); // setContent( ${id}'s project ); // 最初はバックエンド側のApi側から値を呼び出す。 axios.get( ${process.env.REACT_APP_API_URL}/posts/${id} ) // REACT_APP_API_URL= http://localhost:8080/api .then(res=> { console.log('情報の呼出し成功', res.data ); setPost( res.data ); }).catch(err=>{ console.error('情報の呼出し失敗',err); // axios.get() -> サーバーへのapi要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 } // The end of catch ); // The end of axios.get() },[id]); const handleOnChange = (e)=>{ // 変化を反映するロジック const {name, value} = e.target ; setPost({ ...post, [name]: value } ) } const handleSubmit = (e) => { e.preventDefault(); axios.put( ${process.env.REACT_APP_API_URL}/posts/${id} , post) .then(res=>{ console.log( res.data ); alert("編集が完了されました。"); navigate( /posts/${id} ); }).catch( err=>{ console.log(err); alert("編集を失敗致しました。"); } ) alert("データが修正されました。"); // navigate("/post/edit/"+id); navigate( /post/${id} ); } return ( Edit Posting Name // onChange={(e) => setTitle( e.target .value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"名前を入力してください。"} /> Project // onChange={(e) => // setContent( e.target .value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"参加中のプロジェクトを入力してください。"}/> {/* */} {/* Project */} {/* setContent( e.target .value)}*/} {/* placeholder={"Enter Employee ID"}/>*/} {/* */} {/* */} {/* Project */} {/* setContent( e.target .value)}*/} {/* placeholder={"Enter Other Information"}/>*/} {/* */} 編集 /post/${id} } className={"cancel-button"}> キャンセル ); } export default PostEdit;

Lượt thích
0
Số bình luận
6
Lượt xem
80

Hỏi & Đáp

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

그 다음은 PostEdit.js입니다. import {Link, useParams, useNavigate} from "react-router-dom"; import {useEffect, useState} from "react"; import "./css/edit.css"; import axios from "axios"; let PostEdit = () =>{ const{id} = useParams(); // useParam : React RouterからURLパスのparameterを持って来る。 const navigate = useNavigate(); // Page이동에 사용함. let[title, setTitle] = useState(""); let[content, setContent] = useState(""); // let[post,setPost]=useState({ // title:"", // content:"" // }) let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); useEffect(()=>{ // setTitle(`${id}'s name ` ); // setContent(`${id}'s project ` ); // 最初はバックエンド側のApi側から値を呼び出す。 axios.get(`${process.env.REACT_APP_API_URL}/posts/${id}`) // REACT_APP_API_URL=http://localhost:8080/api .then(res=> { console.log('情報の呼出し成功',res.data); setPost(res.data); }).catch(err=>{ console.error('情報の呼出し失敗',err); // axios.get() -> サーバーへのapi要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 } // The end of catch ); // The end of axios.get() },[id]); const handleOnChange = (e)=>{ // 変化を反映するロジック const {name, value} = e.target; setPost({ ...post, [name]: value } ) } const handleSubmit = (e) => { e.preventDefault(); axios.put(`${process.env.REACT_APP_API_URL}/posts/${id}`, post) .then(res=>{ console.log(res.data); alert("編集が完了されました。"); navigate(`/posts/${id}`); }).catch( err=>{ console.log(err); alert("編集を失敗致しました。"); } ) alert("データが修正されました。"); // navigate("/post/edit/"+id); navigate(`/post/${id}`); } return ( Edit Posting Name setTitle(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"名前を入力してください。"} /> Project // setContent(e.target.value)} onChange={handleOnChange} // 変化を反映するロジック placeholder={"参加中のプロジェクトを入力してください。"}/> {/* */} {/* Project */} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Employee ID"}/>*/} {/* */} {/* */} {/* Project */} {/* setContent(e.target.value)}*/} {/* placeholder={"Enter Other Information"}/>*/} {/* */} 編集 キャンセル ); } export default PostEdit;

Lượt thích
0
Số bình luận
6
Lượt xem
80

Hỏi & Đáp

[해결됨]부분적으로 화면 이동이 안되는 부분이 있습니다.

import React from 'react'; import {useNavigate, useParams} from "react-router-dom"; import {Link} from "react-router-dom"; import "./css/detail.css"; import {useEffect, useState} from "react"; import axios from "axios"; let PostDetail = () => { const {id} = useParams(); // URL에 포함된 파라미터 값을 가져오는 hook // http://localhost:3000/users/1 : このURLへ移動後、idが1 の場合に含まれるデータを持って来る。 let navigate = useNavigate(); let [post, setPost] = useState({ // useState：状態管理hook. 引数が状態 title:"", content:"" }); const getPost = () =>{ // axios : 非同期Api 呼出し 処理 library axios.get( ${process.env.REACT_APP_API_URL}/posts/${id} ) // REACT_APP_API_URL= http://localhost:8080/api .then(res=> { // console.log('情報の呼出し成功', res.data ); console.log( res.data ); setPost( res.data ); }).catch(err=>{ // console.error('情報の呼出し失敗',err); console.error(err); // axios.get() -> サーバーへの要請 // -> 応答成功の場合 -> then() 実行 // -> 応答失敗の場合 -> catch() 実行 }); // The end of catch } // The end of getPost function // getPost Arrow 関数を実行。 useEffect(()=>{ getPost(); },[]); const handleDelete = () => { if(!window.confirm("本当に削除しますか？")){ return; } axios.delete( ${process.env.REACT_APP_API_URL}/posts/${id} ) .then(res=>{ console.log( res.data ); alert("削除されました。"); navigate("/home"); }).catch( err=>{ console.log(err); alert("削除過程の中でエラーが発生致しました。"); } ); // The end of catch // alert( 情報が削除されました。 ); } // const post = { // id, // title: The name of ${id} , // content: The project of ${id} , // // empID: EmployId of ${id} , // // info: The other information of ${id} // }; return ( {post.title} {post.content} {/* {post.empID} */} {/* { post.info } */} /posts/edit/${post.id} } className={"edit-button"}> 編集 削除 戻る ); } export default PostDetail;

Lượt thích
0
Số bình luận
6
Lượt xem
80