1

次のようにデータを返す API からフェッチされたデータを使用してグラフを作成しようとしています。

{
  "totalAmount": 230,
  "reportDate": "2020-03-05"
},
{
  "totalAmount": 310,
  "reportDate": "2020-03-06"
}
...

グラフとして表示すると日付文字列が長すぎるので、年の部分を取り除いて短くしたい。

2020-03-06になる03/06

Robin Wieruch による優れたチュートリアルに従って、データをフェッチするためのカスタム フックが作成されました。

const useDataApi = (initialUrl, initialData) => {
  const [data, setData] = useState(initialData);
  const [url, setUrl] = useState(initialUrl);
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [url]);
  return [{ data, isLoading, isError }];
};

React Hooks で書かれた私のチャート作成コンポーネントと共に:

const MyChart = () => {
  const [{ data, isLoading, isError }] = useDataApi(
    "https://some/api/domain",
    []
  );
  useEffect(() => {
    // I'm using useEffect to replace every date strings before rendering
    if (data) {
      data.forEach(
        d =>
          (d.reportDate = d.reportDate
            .replace(/-/g, "/")
            .replace(/^\d{4}\//g, ""))
      );
    }
  }, [data]);
  return (
    <>
      <h1>My Chart</h1>
      {isError && <div>Something went wrong</div>}
      {isLoading ? (
        . . .
      ) : (
        <>
        . . .
        <div className="line-chart">
          <MyLineChart data={data} x="reportDate" y="totalAmount" />
        </div>
        </>
      )}
    </>
  );
};

上記の作品。しかし、レンダリング中に 2 回呼び出されるため、これはベスト プラクティスではないかもしれないと感じています。useEffectそしてuseReducer、カスタム フックを採用しようとすると、コードが機能しなくなります。

この状況でデータを編集する最良の方法は何ですか？

4

1 に答える 1