1.更新領域の設定

1-1. 構成部品の設定(hooks)

一般的な関数のexport.
入力パラメータのitemnameにはjsonオブジェクトがあるため、itemnameをすぐに呼び出すとjsonオブジェクト(itemname.前のコンポーネントで作成されたプロパティ名)がロードされ、値がロードされます.
詳細については、1～3を参照してください.

import React,{useEffect, useState} from 'react';
import axios from "axios";

function MediDetail(itemname){
    const [prints, setPrints] = useState('');
    const [deData, setDeData] = useState(null);
    const [loading, setLoading] = useState(null);
    const [error, setError] = useState(null);
    console.log(itemname);

    /*상위 컴포넌트에서 itemname 파라메터를 받아 서버에 상세 정보를 요청하는 함수*/
    useEffect(() => {
        const joindata = async() => {
            try{
                setError(null);
                setLoading(true);
                await axios.get(
                    'http://localhost:8000/user/medi-detail',{
                        params:{
                            itemname:itemname.itemname
                        }
                    }
                ).then(function(response){
                    console.log(response.data);
                    setDeData(response.data);
                })
            }catch(e){
                setError(e.print);
                console.log('에러발생');
                console.log(deData)
            }
            setLoading(false);
        };
        joindata();
    },[])

    console.log(deData);
    /*deData에 데이터가 있으면 출력하고 없으면 없다고 표시하는 if문*/
    if(deData !== null) {
        return (
            <div>
                <table>
                    <tr><td>{deData.wordCandDto[0].entpName}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].itemName}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].efcyQesitm}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].useMethodQesitm}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].atpnQesitm}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].intrcQesitm}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].seQesitm}</td></tr>
                    <tr><td></td></tr>
                    <tr><td>{deData.wordCandDto[0].depositMethodQesitm}</td></tr>
                </table>
                데이터 있음
            </div>
        )
    }else{
        return(
        <div>
            응 아직 없어~~
        </div>
        )
    }
}

export default MediDetail;

1-2. デバイスを更新するDOM

下図に示すように、特定のDOM内に素子を設けると、そのDOM内に素子が付着する.
if文が使用されていない場合にすぐに戻ると、userEffectの実行が完了するまですべての関数が終了するため、下線付きのMediDetailは持ち上げられません.
(レンダリング時にletなどの変数がリセットされ、usStateを使用して値が変化すると反応が再レンダリングされます.)

次はコードです.

import React from 'react';
import {useState, useEffect,useLayoutEffect, useRef} from "react";
import axios from "axios";
import {BrowserRouter, Link, Route, Switch} from "react-router-dom";
import Content from "./Content";
import MediDetail from "../MediDetail";

function MediList(param) {
    const [word, setWord] = useState(param.param);
    const [list, setList] = useState(null);
    const [loading, setLoading] = useState(null);
    const [error, setError] = useState(null);
    const [callDetail, setCallDetail] = useState(false);
    const [paramItemname, setParamItemname] = useState(null);
    // let paramItemname;


    useEffect(() => {
        console.log(word);
        const MediListReq = async () => {
            try {
                setList(null);
                setError(null);
                setLoading(true);
                await axios.get(
                    'http://localhost:8000/user/mediList', {
                        params: {
                            word: word
                        }
                    }
                ).then(function (response) {
                    console.log(response);
                    console.log(response.data);
                    setList(response.data);
                })
            } catch (e) {
                setError(e.print);
            }
            setLoading(false);
        };
        MediListReq();
    }, []);


    if (loading) return <div>로딩중..</div>
    if (error) return <div>에러발생</div>
    if (!list) return <div>데이터없음</div>

    if (callDetail === false) {
        return (
            <div>
                <table>
                    테스트결과:{list.wordCandDto.map((item, i) => (
                    <tr key={i}>
                        <td>{item.entpname}</td>
                        <td id={item.itemname}
                            onClick={function(){
                                /*MediDetail페이지를 불러오기위해
                                onClick 이벤트시 detail이 true가 되게 합니다.*/
                                setCallDetail(true);
                                setParamItemname(
                                    document.getElementById(item.itemname).innerText
                                );
                                console.log(paramItemname);
                            }}
                        >
                            {item.itemname}</td>
                        <td>{item.efcyQesitm}</td>
                    </tr>

                ))}
                </table>
                데이터 있음
            </div>
        );
        /*callDetail이 true가 되면 MediDetail페이지가 렌더링됩니다.*/
    } else if (callDetail === true) {
        return (
            <MediDetail itemname={paramItemname}/>
        );
    }
}

1-3. 構成部品のパラメータを設定します。

以上のif文の<MediDetail itemname={paramItemname}/>に関する説明.
値をitemname={paramitemname}として保存すると、値は{itemname:(paramitemnameの値)}として保存され、itemnameというprobsに移動します.

itemname:{
	{
	itemname:(paramItemname의 값)
	}
}

の形式で保存します.

2.重要な内容の要約。

1.USEEffectを使用する場合は、if文を使用してサーバとの通信が完了したかどうかを区別して記入します.
2.構成部品ラベルの属性値はprobsとして転送されます.