李亚方置顶2021-06-27const useClick = (id) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(null); const [error, setError] = useState(null); const exeFun = useCallback(() => { setLoading(true); setData(null); setError(null); apiClient .get(`/posts/${id}`) .then((res) => { setLoading(false) setData(res.data) }) .catch((err) => { setLoading(false) setError(err); }) }, []); return { exeFun, data, loading, error } } const { exeFun, data:comm } = useClick(1); <button onClick={()=>{exeFun("1")}}>点击发送请求</button> 按照老师之前写的逻辑，用这种方式也可以点击按钮后去发送请求获取数据共 1 条评论11
Isaac置顶2021-06-15思考题： 1. useArticle Hook 可以提供一个参数，用来标记本地调用是否默认触发副作用去获取数据；对于点击按钮才触发请求的功能，可以在 Hook 中将获取数据的方法 retrn 出去，供外部自由调用。 2. 可以借助 redux，配合 useContext 等 api ，将状态数据存储至全局中。共 1 条评论10
江谢木2021-06-20老师，article?.userId和article&&article.userId的作用是一样的？第一次见这种写法，感觉好简洁作者回复: 这是新的 js 的标准 叫做 optional chaining：https://github.com/tc39/proposal-optional-chaining ，目前已经到 stage 4 完成状态。 在处理 article 可能是 undefine的 的情况时，两者是等价的。但如果 article 还可能是 0，false，null 这样的 falsy 的值时，两者的返回值会不一样。article && article.userId 返回 0, false 或者 null，而 article?.userId 返回 undefined。 所以一般情况下，我们都可以用 ?. 来简化一些条件判断。
共 4 条评论8
18302021-07-29老师，关于串行请求我有些想法，对于多个串行请求它们在逻辑上本身具有连续性，而我们强行把它们分散到单个的hook中是不是加大了代码复杂程度和日后逻辑的理解难度。就是感觉有点重hook的语法形式而忽律了原本的关联性作者回复: 这里倒没有“强行”，例子中的 article 和 user 是两个不同的数据源，所以根据状态分别获取应该比较容易理解。如果两个请求总是在一起使用，那么其实可以封装成一个方法去获取两个请求，这样在使用的时候就等价于一个异步请求了。
🌵小畅叙2021-06-17老师，对于 loading 和错误处理，我们项目是在全局处理的，且 loading 是通过 redux 管理的，想咨询一下，跟您的方法相比，应该用哪种方法呢？4
L2021-06-151. hooks提供一个函数出来用来主动调用 2. redux或者context等内容，对接口调用进行一次改造，先判断是否有缓存，再来决定是否调用接口4
Free fall2021-06-15const defaultResult = { error: null, data: null, loading: false, } const useArticle = ({ id, isAutoFetch = true }) => { const [result, setResult] = useState(defaultResult) const fetch = (id) => { apiClient .get(`/posts/${id}`) .then((res) => { setResult({ ...defaultResult, loading: false, data: res.data }) }) .catch((err) => { setResult({ ...defaultResult, loading: false, error: err }) }) } useEffect(() => { if (!id) return if (!isAutoFetch) return setResult({ ...defaultResult, loading: true }) fetch(id) }, [id, isAutoFetch]) return isAutoFetch ? result : { ...result, fetch } }3
花儿与少年2021-08-07老师能讲解下思考题吗2
琪琪2021-06-17老师，请问需要封装一个需要发送post请求的自定义hooks应该如何封装呢？2- INFRA_UEX2022-11-07 来自天津React 18 应该是不推荐使用 useEffect 加载 sync 的数据源了。应该是使用 useSyncExternalStore。1