[react]モンスター課題コメント

25085 ワード
monster componentDidMount 上のコード React WeCode Fetch テキストリンク

key word

  • componentDidMount()の特性と用途
  • fetch()関数呼び出しAPI
    • を使用
  • map()利用関数回収コンポーネント
  • props提供一方向データ
  • filter()検索実施

    • Monsters.js

    import React, { Component } from "react";
import SearchBox from "./Components/SearchBox/SearchBox";
import CardList from "./Components/CardList/CardList";
import "./Monsters.scss";

class Monsters extends Component {
  state = {
    monsters: [],
    userInput: "",
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          monsters: data,
        });
      });
  }

  handleChange = (e) => {
    this.setState({
      userInput: e.target.value,
    }); // 검색창에 값이 들어오면 실행되는 함수.
  };

  render() {
    const { monsters, userInput } = this.state;
    const matchvalue = monsters.filter((monsters) =>
      monsters.name.toLowerCase().includes(userInput)
    );
    return (
      <div className="Monsters">
        <h1>컴포넌트 재사용 연습!</h1>
        {/* <SearchBox handleChange=정의한메소드 /> */}
        <SearchBox handleChange={this.handleChange} />
        <CardList matchvalue={matchvalue} />
      </div>
    );
  }
}

export default Monsters;

    componentDIdMount(), fetch()


  • fetch関数のパラメータとしてapiアドレスを入れることでJsonデータを受信する.GET方式でデータを受信すれば良いだけです.

  • Json形式のデータをJavaScript形式に変換し、monsters配列にデータを入れます.thenを使用する理由は、apiからJson形式のデータを受信するのに時間がかかり、すべてのデータを受信した後、次の操作を行い、Json形式からJavascript形式にすべてのデータを変換してから操作を行うためです.

  • fetch関数は通常、ComponentDidMount()関数で実行され、ステータス値をsetStateに変更するとrender()が再実行され、render()はfetchが再実行され、無限ループで回転します.ComponentDidMount()は、最初のレンダリングが終了した後に一度だけ実行される特性を持つため、これらの問題を防止します.

    • SearchBox.js

    import React, { Component } from "react";
import "./SearchBox.scss";

class SearchBox extends Component {
  render() {
    return (
      <input
        className="search"
        type="search"
        placeholder="Search..."
        onChange={this.props.handleChange}
      />
    );
  }
}

export default SearchBox;

    フィルタを使用した検索

    handleChange = (e) => {
    this.setState({
      userInput: e.target.value,
    });
  };

  render() {
    const { monsters, userInput } = this.state; //구조분해할당
    const matchvalue = monsters.filter((monsters) =>
      monsters.name.toLowerCase().includes(userInput)
    );
    return (
       <div className="Monsters">
        <h1>컴포넌트 재사용 연습!</h1>
        <SearchBox handleChange={this.handleChange} />
        <CardList matchvalue={matchvalue} />
      </div>
    );
  }
}

export default Monsters;
  • SearchBoxのinputでonChangeイベントが発生しました.
  • propsはhandleChange関数を呼び出します.
  • 入力した値はuserInputに入ります.(setState)
  • filter(),monsters.name.toLowerCase().include(userInput)値をmatchvalue変数に割り当てます.
    ->apiを使用してmonstersに配置されたデータキーの名前を小文字に変換し、ユーザー入力値を含むデータキーをフィルタします.
  • CardList componentのprops.

    • CardList.js

    import React, { Component } from "react";
import Card from "../Card/Card";
import "./CardList.scss";

class CardList extends Component {
  render() {
    const { matchvalue } = this.props; //구조분해할당

    return (
      <div className="card-list">
        {matchvalue.map((el) => (
          <Card id={el.id} name={el.name} email={el.email} />
        ))}
      </div>
    );
  }
}

export default CardList;
  • matchvalue.コンポーネントをmapで繰り返しmatchvalueの長さでスクロールします.

    • Card.js

    import React, { Component } from "react";
import "./Card.scss";

class Card extends Component {
  render() {
    const { id, name, email } = this.props;
    return (
      <div className="card-container">
        <img src={`https://robohash.org/${id}?set=set2&size=180x180`} alt="" />
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    );
  }
}

export default Card;
  • propsは、構造分解後のid、name、およびemailを割り当てるために使用される.


    • 入力した値は名前に含まれるモンスターのみを出力します.
    IO関連
    Java拡張のオブジェクト向け(2)