第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

使用 React 和 Redux Hooks,為什么我的操作沒(méi)有觸發(fā)?

使用 React 和 Redux Hooks,為什么我的操作沒(méi)有觸發(fā)?

qq_花開(kāi)花謝_0 2022-01-13 15:47:52
編輯:已解決!請(qǐng)看下文。我希望我的組件在每次瀏覽器請(qǐng)求其 URL 時(shí)Blog觸發(fā)動(dòng)作創(chuàng)建者,無(wú)論是通過(guò)鏈接還是刷新。fetchBlog我想用 React useEffectHook 和 React-ReduxuseDispatch和useSelectorHooks 來(lái)做。但是,我的操作僅在點(diǎn)擊頁(yè)面鏈接時(shí)觸發(fā);我不明白為什么,即使在閱讀了幾個(gè)解釋(如官方文檔)之后。這是代碼:// Everything duly imported, or else VSC would yell at meexport default function Blog() {  const dispatch = useDispatch();    // slug is set here with useSelector, this always works  useEffect(() => {    dispatch(fetchBlog(slug))  }, [slug, dispatch]);  const blog = useSelector((state) => state.blogs[0]);    // return renders the blog information from the blog constant    // since the action does not fire, blog is undefined because state.blogs is an empty array}我知道,刷新時(shí)fetchBlog不會(huì)因?yàn)?Redux DevTools 而觸發(fā),也因?yàn)槲以赿ebugger那里放了一個(gè)。(并且后端日志沒(méi)有顯示進(jìn)來(lái)的請(qǐng)求。)動(dòng)作創(chuàng)建者本身和reducer 必須在工作;如果不是,則通過(guò)鏈接訪問(wèn)該頁(yè)面時(shí)將無(wú)法正確加載。編輯:我已經(jīng)確定useSelector并且useDispatch不是問(wèn)題的根本原因,因?yàn)楦囊褂玫拇aconnect并mapStateToProps給出mapDispatchToProps相同的結(jié)果。問(wèn)題似乎與useEffect.
查看完整描述

3 回答

?
慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

我認(rèn)為問(wèn)題是您正在返回調(diào)用調(diào)度。從 useEffect 返回的函數(shù)是清理函數(shù),所以我認(rèn)為這不會(huì)在掛載或更新時(shí)運(yùn)行 - 僅在卸載之前運(yùn)行。試試這個(gè):


export default function Blog() {

  // ...

  // Don't return from useEffect. Just call dispatch within the body.

  useEffect(() => {

    dispatch(fetchBlog(slug);

  }, [slug, dispatch]);

  // ...


}

https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect


查看完整回答
反對(duì) 回復(fù) 2022-01-13
?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

我想澄清問(wèn)題是什么,@Trace 引導(dǎo)我找到了。


useEffect沒(méi)有在刷新時(shí)被調(diào)用,因?yàn)樗诮M件渲染/返回后被調(diào)用。刷新時(shí),狀態(tài)(包括博客數(shù)據(jù))丟失;而不是返回,aTypeError被拋出,因?yàn)閐ata.title不存在。所以u(píng)seEffect永遠(yuǎn)不會(huì)有機(jī)會(huì)被調(diào)用并獲取博客的內(nèi)容。


解決方案是這樣的:


export default function Blog() {

  // ...

  useEffect(/* ... */)

  const blog = useSelector((state) => state.blogs[0]);

  if (!blog) {

    return <p>Loading...</p>

  }

  // return actual blog contents here

}  


所以現(xiàn)在fetchBlog確實(shí)被調(diào)用,更新blog和渲染內(nèi)容。


查看完整回答
反對(duì) 回復(fù) 2022-01-13
?
慕尼黑5688855

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊

我不清楚蛞蝓是從哪里來(lái)的。

理論上useEffect在每次渲染后運(yùn)行。如果有多個(gè)參數(shù),它將在第二個(gè)參數(shù)中傳遞的數(shù)組參數(shù)之一發(fā)生更改時(shí)運(yùn)行回調(diào)。


要么創(chuàng)建一個(gè)useEffect空數(shù)組作為第二個(gè)參數(shù)以“一次”運(yùn)行它(例如,當(dāng)您刷新時(shí))或檢查 slug 值。


檢查回購(gòu)后的編輯:


它不起作用,因?yàn)?useEffect 在渲染之后運(yùn)行(盡管有人反對(duì)它,但它包含在我的答案中)。如果之前拋出異常(在本例中為空指針),則調(diào)度調(diào)用只會(huì)在之后發(fā)生,或者根本不會(huì)發(fā)生。

您可以從 react-router 獲取 slug match,可能對(duì)您很方便。


export default function Blog({ match }) {

    const slug = match.params.slug;

etc

git repo 顯示了如何將 dispatch as 作為數(shù)組參數(shù)添加到useEffect,這不是必需的。


查看完整回答
反對(duì) 回復(fù) 2022-01-13
  • 3 回答
  • 0 關(guān)注
  • 298 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)