「≪リカバリ｜Recovery｜emdw≫」ユーザー・ステータスとオブジェクト・データを使用したマッピング関数の作成

久しぶりに靴を購入しても、残りの空虚感は・・・非構造化配分...?

useState、オブジェクトデータ、map

私はこの3人の三角関係を秘密裏に調査します...実際に使ってみると驚くほど...(feat.GODミン周様)
△感動ではなく、少し疲れた.
決めたほうがいい.

useStateの第一印象

前に簡単にstateと書いたことがあります.あ、もちろんその時は今のように使わないので、基本的な知識と
小さくて貴重な例題があり、理解を助けるために書いた文章です.
参考にしたい方は参考にしてください
小さくて貴重な状態
要するに、stateの値を変更するためにusStateを学ぶ時間があるより深いプロセスです.
最初は文法も疎かった.それはいったい何ですか.文法は何ですか.その括弧にはいったいどんな値が入りますか.
星には何か考えがあるようだ.

const [exampleArray, setExampleArray] = useState([]);

ずっとグーグルで何度も見ていて、そのまま使っていて、間違いの山を見るたびに感じます.
もっと勉強したと知っていた.
ここまでは私が感じたUSESTATEの第一印象

今本当に始まった

useStateとは?

まずreact-hookは,関数型素子に機能を追加する際に用いられる関数である.
関数型構成部品では、ステータス値を使用するか、サブ要素にアクセスできます.
(react-hookを深く整理)
useStateは、構成部品にstate値を追加するために使用されます.関数型素子はクラス素子のようにstateを使用できないため、hookを使用してstateなどの機能を持たせる.

usStateマウント

import React, { useState } from 'react';

ユーザ状態宣言

const [count, setCount] = useState(0);

上に書いたようにロードと宣言する以外に、次のコードには直接使用する例がリストされています.

const [count, setCount] = useState(0);

return (
	<div>
  		<p>Click Count {count} times !</p>
    	<button onClick={() => setCount(count + 1)}Click Me !!</button>
  	</div>
)

下のボタンを押すとどうなりますか?そうですね.数字が一つ一つ上がっています.

どうしたんですか。

変数のuseState()のカッコ内で、数値はcountの初期値です.配列があれば([])です.
では、2番目のsetCountは何ですか.countを更新する関数です.したがって、サンプルボタンをクリックすると、setCountはcount + 1を実行し、pタグのcountが増加します.
setCount非同期処理.非同期は、応答が次の動作をどのように処理するかにかかわらず.
非同期と見なされるのは、この関数を呼び出すたびに画面が再描画されるため、パフォーマンスの問題が発生する可能性があります.

mockデータオブジェクトデータの準備

mockデータとは?

これは、フロントエンド開発者が必要に応じて作成したデータの例であり、実際のAPIから受信したデータではない.
現在使用しているオブジェクトデータでは、JSONファイルで作成したmock dataを使用します.

[
  {
    "id": 1,
    "userId": "duuu.__.hyeon",
    "userFeed": "그래도 sass가 나은 편이지 자바스크립트랑 리액트에 비하면 ",
    "userImg": "https://media.vlpt.us/images/hongduhyeon/post/ebc33b2c-f8c5-4792-9a2f-b1dbc5529372/sass.png?w=768",
    "isLiked": true,
    "userComment": [
      {
        "id": 1,
        "userName": "wecode",
        "content": "Welcome to world best coding bootcamp!",
        "isCommentLiked": true
      },
      {
        "id": 2,
        "userName": "jayPark",
        "content": "Hey.",
        "isCommentLiked": false
      }
    ]
  },
  {
    "id": 2,
    "userId": "duuu.__.kong",
    "userFeed": "자바스크립트 진짜 별로야 특히 해달라는 대로 다해줬는데 안들어가는건 무슨 심보니?",
    "userImg": "https://media.vlpt.us/images/hongduhyeon/post/791da457-a0ee-4bd2-8fd4-7839e678bd86/javascript.png?w=768",
    "isLiked": false,
    "userComment": [
      {
        "id": 1,
        "userName": "wecode",
        "content": "리액트는 지옥이다.",
        "isCommentLiked": true
      },
      {
        "id": 2,
        "userName": "HongDuHyeon",
        "content": "부러질지언정 휘어질 수 없다.",
        "isCommentLiked": false
      }
    ]
  },
  {
    "id": 3,
    "userId": "duuu.__.kong",
    "userFeed": "리액트는 할말이 없다. 차라리 날 죽여라 리액트",
    "userImg": "https://media.vlpt.us/images/hongduhyeon/post/ee1b7bfc-29fc-40cc-8226-52eb4996207b/react.png?w=768",
    "isLiked": false,
    "userComment": [
      {
        "id": 1,
        "userName": "wecodeaoisdjo",
        "content": "3번째 컨텐츠",
        "isCommentLiked": true
      },
      {
        "id": 2,
        "userName": "HongDuHyeon",
        "content": "휘어진 것 같다.",
        "isCommentLiked": false
      }
    ]
  }
]

id:各リストのid値

ユーザID:ユーザ個人ID値

ユーザー概要:ユーザー投稿本文

userImg:ユーザーがアップロードした投稿写真

isLiked:はい(ブール値)

userComment:ユーザーメッセージ

userName:伝言ユーザー

内容:ユーザメッセージ

isCommentLiked:現在のコメントの賛状態

ラップの最大カッコを基準に、オブジェクトタイプにカッコを付けたり、配列を宣言したりできます.これらのデータをmapで使用しましょう.

map()のオブジェクトデータで表示

地獄から帰ってきたJavascript-mapアレンジ
まず、私は実際の仕事でmapを使っていて、とても苦しいことがたくさんあります.
まず、作成するコードを説明し、上で作成したmockデータの値をsnsシードのように、スプレーの役割を果たすオブジェクトを私が予め設定したスタイルの位置にそれぞれスプレーします.
しかしreactの中のmapを使うのは初めてなので混同が多いです.

は、まずuserEffect fetch関数を使用してデータをロードする.

const Main = () => {
	const [feedArr, setFeedArr] = useState([]);
  	useEffect(() => {
    	fetch('http://localhost:3000/data/commentData.json', {
     		method: 'GET',
    	})
      	.then(res => res.json())
      	.then(data => {
        	setFeedArr(data);
      	});
	}, []);
}

の戻り文にマッピングを作成し、データの個数に基づいて画面にマッピング関数を作成します.

  return (
    <div className="main">
      <Nav />
      <div className="container">
        <div className="feeds">
          {feedArr.map(list => {
            return <Feed key={list.id} {...list} />;
          })}
        </div>
        <Aside />
      </div>
    </div>
  );

データのアップロード中にsetFeedAr(data)にデータをロードするため、データはオブジェクト形式で
feedarr状態です.
次にmap()関数を使用して、含まれるデータを初期値としてユーザーに送信します.
ここにキー値を書かないと、自分のキー値を使用する必要があるというエラーが発生することに注意してください.
それはreact-map関数を適用するときにキーアイテムを付与する理由です.ここで確認すれば原因がわかります.
次にspread演算子{...list}を使用して、以前のオブジェクトデータをpropsを介してFeed要素に渡す.
ここで渋滞しているのは、なぜ...listを使うのか分からないので2時間もかかったGoogleリンクです...グーグルの実力

に送信対象データを支柱として構造分解割当を用いて受信「構造分解の割り当て」を参照してください。

.

const Feed = ({ userId, userFeed, userComment, userImg }) => {
	
}

既存のJavaScriptでは構造分解割当てを使用していますが、実際に必要とされているため初めて使用します.
構造分解を用いて記述されたコードを割り当てるとprops値はない.オブジェクトデータのキー値を受信する場合、props.省略できます.

// bad
const Feed = ( userId, userFeed, userComment, userImg )

// good
const Feed = ({ userId, userFeed, userComment, userImg })

対象データなので、普通の括弧内にもう一度中括弧を書く!!!これは本当に重要です.(陣地x 100)
その後、userComment以外の値は{userId},{userFeed}と書くことができる.
先ほど作成したユーザーが残したコメントを並べ替えたuserCommentに入り、その中でも並べ替えに入り、その中のデータを表示する必要があるので、地図を書く必要があります.
ここで理解しなければならないのはmapを使うことです.それは何ですか.

useStateで配列を作りましょう!

という結果に.

const [commentArray, setComentArray] = useState(userComment);

このように道具で並べばレビューアレーでもう一度地図を回して自分のレビューに合わせて吹き付けることもできます

に感銘を与える

Reactでは以前JavaScript,jQueryでは利用したことのない技術が多く使われている.過去によく使われていたjQueryほど馴染みのあるものではありませんが、今回はたくさんのシャベルや苦しみ、悩みの中で開発され、成長を感じました.
むしろ曲がらない🔥