プロジェクトで発生した問題...

質問です。

事前に作成したREST APIにリクエストを送信したいのですが、ブラウザがCORSの問題を表示してブロックします...
この問題を解決するためにreactにExpressサーバをバインドすることにしました.新しい学習がたくさんあります.
もともと使われていた素子は関数型なので、コンポーネントDidMount関数も使えないので、素子自体をクラスに変換する作業をしてくれました.
このようにクラスを変えた後に発生した様々な問題が解決され,その後素子上にAPIでデータを受信するstateが作成され,ComponentDidMountを用いて同様の飛ばしCORSがさらにGoogle化された結果,Expressサーバ上でCORSモジュールを使用すれば解決できることが分かったため,CORSを用いてCORS問題を解決した.npm install cors --save

app.use(cors());

質問です。

CORS問題を解決したと思って終わりましたが、CORSの背後にはもっと他の問題が隠されていました...
問題はapiから受信したjsonデータをWeb上に置く方法を考えていないことです.

{
  '0': '돈채콩나물밥&양념장',
  '1': '김칫국',
  '2': '장각구이(갈비맛)&카사바칩',
  '3': '열무무침',
  '4': '배추김치'
}

dataはこのようになっているので,この問題は最初から最後まで回転する関数を作成することによって解決される.
function printAll(meal, length) {
let value=「今日の食事は」
for (let index = 0; index < length; index++) {
value = value + ${meal[index]} ;
value = value.replace("amp;", "");
}
console.log(value)
return value
}

// 생략
return (
            <div>
                <header>
                    <div class="menu">
                        <div class="logo">$$</div>
                        <div class="menu-all"><Link to="#">온도</Link></div>
                        <div class="menu-all"><Link to="#">미세먼지</Link></div>
                        <div class="menu-all"><Link to="#">급식</Link></div>
                    </div>
                </header>
                <article>
                    <div class="temperature"></div>
                    <div class="finedust"></div>
                    <div class="cafeteria">
                        <p>{meal ? printAll(meal, Object.keys(meal).length) : "로딩중..."}</p> // 이 부분이 함수 사용
                    </div>
                </article>
            </div>
        )

すみません、コードが汚いです.
問題はこうして頭を絞って解決した.

そのまま出てきました.

tmi

以前から怠け者だと思っていたので、一日に一度文章を書いて、今日は初めてなので、文章が流暢ではなく、本当に申し訳ありませんでした.
今日もたくさんのことを学んで幸せでした!
長い文章を読んでくれてありがとう.