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。