React 學習之 Effect 問題

前言

記錄一次Effect bug 引發的深入瞭解,
線上 代碼

const pageInfo = ({orgFindpage,dispatch}) => {
  let fun4form = {};
  const [form, upForm] = useState({...});

  const fun = {
    async updateForm(){
      const {current} = currProps
      if(current.length === 0) {
        await dispatch({ type: `common/fetchOrgFindpage` });
      }
      
      console.log(orgFindpage)

      form.list.map(curr=>{
        if(curr.key == 'orgId')curr.options.list = currProps.current.map(obj=>{return {label:obj.articleTopicalName+obj.title,value:obj.articleId}});
        return curr;
      });
      upForm({form})
    }
  };

  //自己去拿數據可以 提取成 公共方法來
  useEffect(() => {
    fun.updateForm();
  }, []);

  return (
    <PageHeaderWrapper>
      <FromFactory form={form}> </FromFactory>
    </PageHeaderWrapper>
  );
};
export default connect(({ common:{orgFindpage} }) => ({ orgFindpage }))(pageInfo);

注意這個 orgFindpage 的值 一直輸出 []
原因：effect 在每次渲染的時候內部的props 都是在渲染的時候的，而我們這邊不管內部是什麼值 在其閉包範圍內，其 props 的值 始終是之前的
解決方案：使用 useRef 來對數據進行綁定 每次渲染後重新賦值 那麼 得到的值 可以是最新的了

成功代碼:

const pageInfo = ({orgFindpage,dispatch}) => {
  let fun4form = {};
  const [form, upForm] = useState({...});
  const currProps = useRef(orgFindpage);
  currProps.current = orgFindpage;
  const fun = {
    async updateForm(){
      const {current} = currProps
      if(current.length === 0) {
        await dispatch({ type: `common/fetchOrgFindpage` });
      }
      console.log(orgFindpage,currProps.current)

      form.list.map(curr=>{
        if(curr.key == 'orgId')curr.options.list = currProps.current.map(obj=>{return {label:obj.articleTopicalName+obj.title,value:obj.articleId}});
        return curr;
      });
      upForm({form})
    }
  };

  //自己去拿數據可以 提取成 公共方法來
  useEffect(() => {
    fun.updateForm();
  }, []);

  return (
    <PageHeaderWrapper>
      <FromFactory form={form}> </FromFactory>
    </PageHeaderWrapper>
  );
};
export default connect(({ common:{orgFindpage} }) => ({ orgFindpage }))(pageInfo);

深入學習 ()

參考：精讀《useEffect 完全指南》 https://www.cnblogs.com/ascoders/p/10591832.html

useEffect 的常見問題

• 每次 Render 都有自己的 Props 與 State

可以認爲每次 Render 的內容都會形成一個快照並保留下來，因此當狀態變更而 Rerender 時，就形成了 N 個 Render 狀態，而每個 Render 狀態都擁有自己固定不變的 Props 與 State。