반응: "이것이 내가 컴포넌트를 작성할 수 있는 방법이었으면 합니다."

마이크 피콜로


@mfpiccolo






이것이 내가 구성 요소를 작성할 수 있는 방법이 되었으면 합니다.


오전 04:08 - 2019년 6월 5일





11

105

도전 수락!

아래에 useMatchFetch에 대한 코드가 있습니다.

import React from "react";
import { useMatchFetch } from "./effects/useMatchFetch";

export const Example = () => {
  const render = useMatchFetch("https://swapi.co/api/people/1/?format=json");

  return render({
    pending: () => <div>Loading</div>,
    error: err => <div>{err.toString()}</div>,
    data: data => <pre>{JSON.stringify(data, null, 2)}</pre>
  });
};

내 라이브 스트림 보기

내가 이것을 만든 방법에 대한 내 프로세스를 보고 싶습니까? Twitch에서 저를 시청하세요!

useMatchFetch

나는 실제로 이것을 정말로 좋아합니다. 나는 이것을 몇 군데에서 사용하게 될 것이라고 생각합니다.

import { useState, useEffect } from "react";

const render = data => match =>
  data.pending ? match.pending()
  : data.error ? match.error(data.error)
  : data.data  ? match.data(data.data)
  : null // prettier-ignore

export const useMatchFetch = url => {
  const [data, setData] = useState({ pending: true });

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData({ data, pending: false }))
      .catch(error => setData({ error, pending: false }));
  }, [url]);

  return render(data);
};

끝

트위터에서 팔로우