FreeTitle网页的profile修改过程-踩坑记录

[law-chain-hot]

FreeTitle网页的profile修改过程-踩坑记录

2周前跟着大佬加入了学校的学生创业团队，负责web前端，这是项目网址 [FreeTitle] ，欢迎访问
因为刚到团队，项目也开始了几个月了，很多地方还不是很熟悉，所以边读代码边做
最近接到的大任务是修改profile

dark 模式下的profile，中间为3个tabs

修改profile界面

模仿了 Instagram 的个人主页，下面分了3个tabs，点击切换tabs，下面的内容为card形式

踩坑记录

使用2个file，分别是Profile.js和ProfileTabs.js，前者用于拿数据，后者用于render我们生成的tab

有3个部分踩坑

• React陷入无限循环： 错误的使用了useEffect
• 传入ProfileTabs的数据为JSX语法的div节点
• delete时不会刷新页面： 与原页面的代码结构不一样

如何解决切换 dark mode 时，tab格式崩溃（css class 丢失）

最终总结，由于使用了 dark mode，所以每次切换mode的时候，页面会重新render并且控制mode的css class会修改名字。所以此时的用于生产div的blogListFn函数需要更新（使用此时的css class）。

但是我这里因为只监听了[missions, blogs, bookmarks]这三组 raw data 是否异步获取到。此时点击切换 mode ，并不会触发 loadTabs，所以tabs会崩掉

  // for tabs： 传入3组 raw data
  const loadTabs = (missions, blogs, bookmarks) => {

    // 使用 raw data 生产我们的 div
    let missionsTabData = missionsListFn(missions)
    let blogTabData = blogListFn(blogs)
    let bookmarksTabData = bookmarksListFn(bookmarks)

    // put div into ProfileTabs.js
    setcontents([
      { label: `Blogs (${blogs.length || 0})`, 'value': blogTabData || "no Blogs", 'button': blogAddIcon },
      { label: `Missions (${missions.length || 0})`, 'value': missionsTabData || "oops Missions are gone", 'button': missionAddIcon },
      { label: `Bookmarks (${bookmarks.length || 0})`, 'value': bookmarksTabData || "oops no Bookmarks" },
    ])
  }



// ======= 修改前 =======
  useEffect(() => {
      loadTabs(missions, blogs, bookmarks)
  }, [missions, blogs, bookmarks]) // 异步取得3组 raw data [missions, blogs, bookmark]，当任一变化时，重新生产我们的tabs


// ======= 修改后 =======
  useEffect(() => {
      loadTabs(missions, blogs, bookmarks)
  }, [missions, blogs, bookmarks, classes]) // 加入监听classes，因为切换mode的时候，css的class名字后缀会随机生产


// 其中 classes: 包含此页面所有class的css style

//将生成的 contents 传入 ProfileTabs 里面 作为参数
    <div className={classes.cardSection}>
        <div className={classes.innerCardSection}>
          <ProfileTabs contents={contents} button={blogAddIcon, missionAddIcon} />
        </div>
    </div>

下面是ProfileTabs.js的return部分的代码

    <>
        <Tabs value={currentTab} fullWidth onChange={handleTabChange} centered className={classes.stickySection}>
            {tabs}
        </Tabs>
        <div className={classes.addIcon}>
            {buttons[currentTab] && buttons[currentTab]}
        </div>
        <div className={classes.outWrapper}>

            <div className={classes.innerWrapper}>
                {cards[currentTab]}
            </div>
        </div>
    </>

谈谈优化

经历了2个过程

• 第一步，自己写了个blogReady state，在异步获取到blog raw data后，blogReady状态标记为true。接着当3个raw data全部为true时，运行loadTabs()，render我们的数据。
  • 这样做的问题是，我们的Tab一定会等到3个数据全部获取完后才能render，【延缓了加载】
• 第二步，如上改为监控3个raw data是否分别获取完毕，任一完毕后，便调用loadTabs()，即做到了加载好一个tab便生成一个

移动端 light 模式下的情况，3个tabs吸顶

---

⬅ 返回我的Blog