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

26 asked

0

해결되었습니다.

<Link to={/post/edit/${post.id}} className={"edit-button"}>

로 수정해야 하더군요.

0

참고로 다른 화면간 이동은 다 되는데, 이 상세화면과 수정 화면.. 두 화면 사이가 제대로 이동이 안되네요.

0

PostDetail.js에서 수정화면으로 넘어가는 버튼에서

값을 수정해봐도 잘 안들어가지네요.

<Link to={/posts/edit/${post.id}} className={"edit-button"}>

編集

</Link>

혹은

<Link to={/posts/edit/${id}} className={"edit-button"}>

編集

</Link>

이 두 가지 방법 모두 화면 이동이 안되는 상황입니다.

0

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 (

<div className={"post-edit-container"}>

<h1 className={"post-edit-title"}>Edit Posting</h1>

<form onSubmit={handleSubmit} className={"post-edit-form"}>

<div className={"form-group"}>

<label htmlFor={"title"}>Name</label>

<input id={"title"} type={"text"} value={post.title}

// onChange={(e) => setTitle(e.target.value)}

onChange={handleOnChange} // 変化を反映するロジック

placeholder={"名前を入力してください。"} />

</div>

<div className={"form-group"}>

<label htmlFor={"content"}>Project</label>

<textarea id={"content"} 　value={post.content}

// onChange={(e) =>

// setContent(e.target.value)}

onChange={handleOnChange} // 変化を反映するロジック

placeholder={"参加中のプロジェクトを入力してください。"}/>

</div>

{/*<div className={"form-group"}>*/}

{/* <label htmlFor={"empID"}>Project</label>*/}

{/* <textarea id={"empID"} value={empID} onChange={(e) => setContent(e.target.value)}*/}

{/* placeholder={"Enter Employee ID"}/>*/}

{/*</div>*/}

{/*<div className={"form-group"}>*/}

{/* <label htmlFor={"info"}>Project</label>*/}

{/* <textarea id={"info"} value={info} onChange={(e) => setContent(e.target.value)}*/}

{/* placeholder={"Enter Other Information"}/>*/}

{/*</div>*/}

<div className={"button-group"}>

<button type={"submit"} className={"submit-button"} >

編集

</button>

<Link to={/post/${id} } className={"cancel-button"}>

キャンセル

</Link>

</div>

</form>

</div>

);

}

export default PostEdit;

0

그 다음은 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 (
         <div className={"post-edit-container"}>
             <h1 className={"post-edit-title"}>Edit Posting</h1>
             <form onSubmit={handleSubmit} className={"post-edit-form"}>
                 <div className={"form-group"}>
                    <label htmlFor={"title"}>Name</label>
                     <input id={"title"} type={"text"} value={post.title}
                         //    onChange={(e) => setTitle(e.target.value)}
                            onChange={handleOnChange} // 変化を反映するロジック
                    placeholder={"名前を入力してください。"}  />
                 </div>
                 <div className={"form-group"}>
                     <label htmlFor={"content"}>Project</label>
                     <textarea id={"content"} 　value={post.content}
                               // onChange={(e) =>
                               //     setContent(e.target.value)}
                               onChange={handleOnChange} // 変化を反映するロジック
                               placeholder={"参加中のプロジェクトを入力してください。"}/>
                 </div>

                 {/*<div className={"form-group"}>*/}
                 {/*    <label htmlFor={"empID"}>Project</label>*/}
                 {/*    <textarea id={"empID"} value={empID} onChange={(e) => setContent(e.target.value)}*/}
                 {/*              placeholder={"Enter Employee ID"}/>*/}
                 {/*</div>*/}

                 {/*<div className={"form-group"}>*/}
                 {/*    <label htmlFor={"info"}>Project</label>*/}
                 {/*    <textarea id={"info"} value={info} onChange={(e) => setContent(e.target.value)}*/}
                 {/*              placeholder={"Enter Other Information"}/>*/}
                 {/*</div>*/}

                 <div className={"button-group"}>
                     <button type={"submit"} className={"submit-button"} >
                         編集
                     </button>

                     <Link to={`/post/${id}` } className={"cancel-button"}>
                         キャンセル
                     </Link>
                 </div>

             </form>
        </div>
    );
}

export default PostEdit; 

0

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 (

<div className={"post-detail-container"}>

<h1 className={"post-detail-title"}>{post.title}</h1>

<p className={"post-detail-content"}>{post.content}</p>

{/*<p className={"post-detail-empID"}>{post.empID}</p>*/}

{/*<p className={"post-detail-info"}>{post.info}</p>*/}

<div className={"button-group"}>

<Link to={/posts/edit/${post.id}} className={"edit-button"}>

編集

</Link>

<button onClick={handleDelete} className={"delete-button"}>

削除

</button>

</div>

<Link to="/home" className="back-link">戻る</Link>

</div>

);

}

export default PostDetail;