使用React + React Hooks

3 年 ago
文, 翔
2 minutes

使用fetch请求获取数据并创建排名。

假设

我们将从以下之前创建的环境开始。

親 需要中文精通的中文為母語者來改寫此句子。

app.tsx文件的内容需要用中文进行本地化

import React, { FC } from "react";

const App: FC = () => {
return <h1>Hello World</h1>;
};
export default App;

孩子

component文件夹 > content.tsx
※将数据传递到此组件，稍后使用

import React, { FC } from "react";

export const Content: FC = () => {
return <h1>Hello Hello</h1>;
};

到目前为止确认一.

如果在浏览器中访问执行 yarn start 后显示了 Hello World，则表示一切正常！

创建dummyData

使用API并通过json-server假设数据流动，创建虚拟数据。
执行yarn add -D json-server命令。

模拟文件夹 > 虚拟数据.json

虚拟数据.json

{
"ranking": [
    { "word": "テスト", "count": 10 },
    { "word": "テスト1", "count": 5 },
    { "word": "テスト2", "count": 1 }
  ]
}

创建模型

源文件位于 types 文件夹下的 type.d.ts 文件中。

export interface Ranking {
word: string;
count: number;
}

在顶级的app.tsx文件中进行数据管理。

app.tsx: 应用.tsx

import React, { FC, useEffect, useState } from "react";
import { Content } from "./component/content";
import { Ranking } from "./types/type";

const App: FC = () => {
  const [ranking, setRanking] = useState<Ranking[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:3000/ranking");
      const rankingData = await response.json();
      setRanking(rankingData);
      //今回はブラウザ上でデータが入ってきているか確認するためconsoleを記載
      console.log(rankingData);
    };
    fetchData();
  }, []);
  return (
    <>
      <Content />
    </>
  );
};
export default App;
    • Appコンポーネント内でuseStateを使う

rankingは初期値(今回はuseState<RankingData[]>([])となっているので空配列が初期値)

setRankingはデータが更新した値(今回はfetchして取得したデータを入れる)

useEffect(副作用)：関数コンポーネントのレンダリングに関係ない処理

useEffectの第二引数である[]に値を入れることで依存関係が作れる

在此我們確認至目前為止（確認二）。

    1. 在终端上执行命令npx json-server –watch ./mock/dummyData.json（{^_^}/ hi！如果看到这个标记就好了！）

 

    1. 在另一个终端上执行yarn start命令

 

    1. 在浏览器中访问localhost:8111

 

    在验证控制台上确认存在相同值的虚拟数据。

现在数据传输的准备工作已经完成了！

将数据传送到组件中

app.tsx 的中文翻译：
app.tsx

<Content ranking={ranking}/>

useStateのrankingを子に流す

由于内容.tsx没有进行任何更改，所以在ranking中出现了错误。

内容.tsx

import React, { FC } from "react";
import { RankingData } from "../types/type";

export const Content: FC<RankingData> = (props) => {
const { ranking } = props;
return (
    <>
   　　<h1>Hello Hello</h1>
    <table>
        <tr>
        {ranking.map(({ word }) => {
            return (
            <tr>
                <td key={word}>{word}</td>
            </tr>
            );
        })}
        </tr>
    </table>
    </>
  );
};
    • 親から流れてきたranking= props

rankingを分割代入で展開する

rankingのデータを全てテーブルに入れるためmapを使う
ダミーデータのcountは使わないのでwordだけ
新しい型RankingDataを作成(下記)

tyoes > type.d.ts

tyoes > tyoes.d.ts

export interface RankingData {
ranking: Ranking[];
}

最终

    1. 在终端上执行命令npx json-server –watch ./mock/dummyData.json（已将其作为mock命令整合到scripts中，使用yarn mock）

 

    1. 在另一个终端中执行yarn start命令

 

    在浏览器中访问localhost:8111

如果在“你好你好”之后出现了“测试”，“测试1”，“测试2”的显示，那就没问题！

只需要增加组件并进行横向展开即可。

参考资料

bannerAds