const 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. useArticle Hook 可以提供一个参数，用来标记本地调用是否默认触发副作用去获取数据；对于点击按钮才触发请求的功能，可以在 Hook 中将获取数据的方法 retrn 出去，供外部自由调用。 2. 可以借助 redux，配合 useContext 等 api ，将状态数据存储至全局中。

老师，article?.userId和article&&article.userId的作用是一样的？第一次见这种写法，感觉好简洁

老师，关于串行请求我有些想法，对于多个串行请求它们在逻辑上本身具有连续性，而我们强行把它们分散到单个的hook中是不是加大了代码复杂程度和日后逻辑的理解难度。就是感觉有点重hook的语法形式而忽律了原本的关联性

老师，对于 loading 和错误处理，我们项目是在全局处理的，且 loading 是通过 redux 管理的，想咨询一下，跟您的方法相比，应该用哪种方法呢？

1. hooks提供一个函数出来用来主动调用 2. redux或者context等内容，对接口调用进行一次改造，先判断是否有缓存，再来决定是否调用接口

const 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 } }

React 18 应该是不推荐使用 useEffect 加载 sync 的数据源了。应该是使用 useSyncExternalStore。

老师能讲解下思考题吗

老师，请问需要封装一个需要发送post请求的自定义hooks应该如何封装呢？