React：“我真希望这就是我编写组件的方式。”
DevTwitter Chrome 扩展程序
🍻
🍻
🍻
已接受的挑战！
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);
};
结尾
在 Twitter 上关注我@joelnet
