React + Redux 遇到的坑

这两天在忙公司移动端的项目,我们采用的技术是React,配合Redux进行数据的存取,期间遇到了不少坑。

导航切换
加载更多

1.根据当前的列表数list.size和列表总数count来判断是否需要按钮来执行加载更多。

1.切换category,首先获取categoryID。
2.然后根据categoryID获取List Count,将Count存入对应的category中,同时将读取状态初始化并存入category中,后续会根据数据读取状态来判断Loading是否显示。
3.更改category中的读取状态,显示为获取中,然后根据categoryID获取List,将List存入对应的Blog List中,再更改读取状态,表示读取成功。

handleClickCategory(e) {
    const categoryID = parseInt(e.target.id.replace('blog_category_', ''), 10);
    if (this.props.BlogStateActiveCategoryID !== categoryID) {
      this.props.updateBlogStateActiveCategoryID(categoryID);

      const blogListAfterFilter = this.props.BlogStateBlogList.filter((blog) => (blog.category === categoryID));

      if (blogListAfterFilter.isEmpty()) {
        this.updateActiveCategoryBlogCount(categoryID);//更新count
        this.updateBlogList(categoryID);//获取List并更新
      }
    }
  }
//获取count 并初始化fetch状态
updateActiveCategoryBlogCount(categoryID) {
    const { BlogStateCategory } = this.props;
    getBlogCount(categoryID)
      .then((blogCount) => {
        this.props.updateBlogStateCategory(
          BlogStateCategory.update(
            BlogStateCategory.findIndex((categoryItem) => (categoryItem.get('id') === categoryID)),
            (categoryItem) => (categoryItem.merge({
              count: parseInt(blogCount, 10),
              fetchPending: true,//表示读取数据中,需要显示loading和更改button文案
              fetchFail: false,
              fetchSuccess: false,
            }))
          )
        );
      });
  }
updateBlogList(categoryID) {
    const { BlogStateBlogList, BlogStateCategory } = this.props;
    this.props.updateBlogStateCategory(
      BlogStateCategory.update(
        BlogStateCategory.findIndex((categoryItem) => (categoryItem.get('id') === categoryID)),
        (categoryItem) => (categoryItem.merge({
          fetchPending: true,//表示读取数据中,需要显示loading和更改button文案
          fetchFail: false,
          fetchSuccess: false,
        }))
      )
    );

    getBlogList(
      categoryID,
      Math.ceil(BlogStateBlogList.filter((blog) => (blog.category === categoryID)).size / DEFAULT_BLOG_LIST_SIZE)
    )
      .then((blogList) => {
        setTimeout(() => {
        // 以下使用BlogStateCategory等,最好加上 this.props.来使用store中的最新数据
          this.props.updateBlogStateCategory(
            this.props.BlogStateCategory.update(
              this.props.BlogStateCategory.findIndex((categoryItem) => (categoryItem.get('id') === categoryID)),
              (categoryItem) => (categoryItem.merge({
                fetchPending: false,//数据读取结束后,将该状态更新为false
                fetchFail: false,
                fetchSuccess: true,
              }))
            )
          );

          this.props.updateBlogStateBlogList(
            BlogStateBlogList.push(...List(blogList))
          );
        }, 500);
      })
      .catch(() => {
        this.props.updateBlogStateCategory(
          this.props.BlogStateCategory.update(
            this.props.BlogStateCategory.findIndex((categoryItem) => (categoryItem.id === categoryID)),
            (categoryItem) => (Object.assign(categoryItem, {
              fetchPending: false,
              fetchFail: true,
              fetchSuccess: false,
            }))
          )
        );
      });
  }

问题:
第一次将count和fetch状态存入category成功,但获取List之后再更改category中的数据,会发现count不见了,只有fetch了。

原因:原category被copy了两份,一份被用于步骤2,一份被用于步骤3。步骤2执行成功之后,count和fetch均被保存。但是后续的步骤3完成之后,步骤3中只更改了fetch,然后被存入category中,此时由于步骤3执行在后,在时间轴上,就将步骤2的跳过了,因此这个时候看数据,会发现是没有count的。

解决办法:
每次更改数据,都通过this.props.BlogStateCategory来获取最新的内容进行更改,而不是在一开始将它赋值于一个新变量,然后通过该变量来更新数据。因为它这个是内容的复制,然后再替换,而不是通过指针来修改的。
换句话说,要改数据,可以,但请在最新的数据上进行更改,否则在这中间被更改过的数据将被最后一次更改的数据替换掉。

2.导航切换时,状态更新有问题

1.切换category,首先获取categoryID。
2.然后根据categoryID判断当前是否有数据,有,就将内容筛选出来显示在页面上,如果没有,更改fetch状态为读取中并执行loading动画,然后获取List。
3.List获取成功后,将列表存入store中,更改fetch状态为读取结束,页面上会自动根据fetch状态来判断是否显示Loading以及按钮文案。
4.由于获取数据比较快,出现问题之后认为是两次更改太接近,导致没有看清,在获取成功后加了5s的延迟,结果是没有变化,store中的变化没有反映在页面上。
5.或者在列表底部点击加载更多按钮,再内容显示出来之前,改变store中的pending状态,并更改按钮文案。

出现的问题:
切换不同的导航,可以看到fetch状态确实发生的更改,但是页面上的loading没有显示,按钮的文案也没有变化,一直是加载更多。

原因:
在一开始就已经通过fromJS将数据改变成不可变对象了,此时要更改数据内容,需要使用immutable的api来更改

解决办法:
更改用merge

3.route设定indexRoute后,子页面跳转后,indexRoute会始终激活activeClassName。

在“关于我们”这一模块中,嵌套了公共的menu,以及不同子页面的内容,导航上设置了activeClassName,但是页面跳转后,导航条上会有两个被激活的样式。

解决办法:
在route中不设置indexRoute,而是改为onEnter事件,对路由进行重定向。
但此时又出现了一个新的问题,在子页,比如About/Career页面中时,切换到/about目录,此时不会进行重定向,原因是不会再一次进入onEnter事件。此时需要一个onChange事件,在路由更改后,根据判断来进行页面跳转。

{
      path: '/about',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('AppContainers/About/reducer'),
          System.import('AppContainers/About'),
        ]);
        const renderRoute = loadModule(cb);
        importModules.then(([reducer, component]) => {
          injectReducer('about', reducer.default);
          renderRoute(component);
        });
        importModules.catch(errorLoading);
      },
      onEnter({ location }, replace) {
        if (location.pathname === '/about') {
          replace('/about/company');
        }
      },
      onChange(prevState, nextState, replace) {
        if (
          prevState.location.pathname !== nextState.location.pathname &&
          nextState.location.pathname === '/about'
        ) {
          replace('/about/company');
        }
      },
      childRoutes: [
        {
          path: 'company',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Company')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        }, {
          path: 'career',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Career')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'events',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Events')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'contact',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Contact')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'pr',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Pr')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'pr/:id',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/PrDetail')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'faqs',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/FAQs')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'privacy',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Privacy')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'terms',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Terms')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
        {
          path: 'feedback',
          getComponent(nextState, cb) {
            System.import('AppContainers/About/Feedback')
              .then(loadModule(cb))
              .catch(errorLoading);
          },
        },
      ],
    },

4.react监听页面滚动事件

首先是在页面中,当元素加载之前和加载之后,绑定滚动事件。

constructor(props) {
    super(props);
    this.state = {
      sidebarFixed: false,
    };
  }
componentWillMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
  }
handleScroll() {
    const scrollTop = document.body.scrollTop;
    const headerHeight = document.getElementById('header').offsetHeight;
    if (scrollTop >= headerHeight) {
      this.setState({ sidebarFixed: true });
    } else {
      this.setState({ sidebarFixed: false });
    }
  }

这里会出现一个问题,就是当页面跳转时,该事件没有被解除,在其他页面进行页面滚动时,会报错。因为获取不到页面元素header的高度,所以当离开该页面的时候,需要解除绑定事件。

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  }

这时会发现,这个并没有其效果,原因在于我们是在事件中绑定的this,这里每次都是一个新的对象,因此没办法解除我们一开始绑定的事件对象。
于是将代码更改为

 constructor(props) {
    super(props);
    this.state = {
      sidebarFixed: false,
    };
    this.handleScroll = this.handleScroll.bind(this);
  }
  componentWillMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
  handleScroll() {
    const scrollTop = document.body.scrollTop;
    const headerHeight = document.getElementById('header').offsetHeight;
    if (scrollTop >= headerHeight) {
      this.setState({ sidebarFixed: true });
    } else {
      this.setState({ sidebarFixed: false });
    }
  }

好了,将事件在构造函数中绑定好,然后调用和解除的都是同一对象。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,751评论 18 136
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 8,031评论 6 13
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,007评论 4 43
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 21,690评论 7 243
  • 走路喜欢看树,这个习惯不知道是从什么时候有的,大概是哪次没长眼被碰到然后开始惦记的。 儿时用那种大大的桐叶来遮雨,...
    白九阅读 112评论 0 1
  • 【微公益】【682】【每日经典,伴您早起】【20170307孟子156】 孟子曰:“拱把之桐梓,人苟欲生之,皆知所...
    北冥_鲲阅读 104评论 0 3
  • 一年一度的中秋节马上就要来了,妈妈们可以在赏月的时候,一边吃着月饼、一边给孩子讲讲中秋节的来历,月饼的来历,让中秋...
    嘉洋妈咪阅读 777评论 0 0
  • 今天收到关于app Store 驳回的提交版本,是关于定位信息的,最近,苹果对用户权限审核越来越严格,所以之前好多...
    兜兜Jerry阅读 760评论 0 1