class200ok | Day 3

8598 ワード
テキストリンク
もとはclass型だったものを関数型の素子に変える練習をしました.
でも素子は表示されません??
const getMonster = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => setMonsters({ res }));
  };

return (
    <div className="Monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      {/* <SearchBox handleChange=정의한메소드 /> */}
      <CardList monsters={monsters} />
    </div>
  );
以上のコードは、親コンポーネントとしてapiからデータを受信し、サブコンポーネントに渡されます.
function CardList({ monsters }) {
  // useEffect(() => {
  //   console.log("monsters");
  // }, []);
  console.log(monsters);
  return (
    <div className="card-list">
      {monsters[0] &&
        monsters.map((monstersList) => {
          return (
            <Card
              key={monstersList.id}
              id={monstersList.id}
              name={monstersList.name}
              email={monstersList.email}
            />
          );
        })}
    </div>
  );
}

ここまで来て、地図が回らない.
ずっと考えていて、私一人では解決しにくいので、同級生たちと一緒に探してみました.クラスメートたちと話して発見した間違いはresを相手に渡したので、よく見つけられなかったからです!
オブジェクトに値が見つかりません.propsに渡されます.
const getMonster = () => {
    fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => setMonsters(res));
  };
親コンポーネントのコードは、上記のように変更され、サブコンポーネントによく渡されます.👏👏👏
[21/09/27]Junzzi Editorプロジェクトの設定-(4)scssの適用
コレクション内の同時変更例外