交互式圣经应用条件渲染按钮异常问题排查

核心问题 #

切换书籍时，chapter状态未重置为初始值，导致：

• 依赖selectedBook和chapter的API请求会用旧章节ID请求新书数据，大概率返回空或错误结果
• 章节按钮渲染依赖bookChapters，但旧章节状态残留会干扰新章节列表的正常渲染逻辑

修复步骤 #

1. 切换书籍时强制重置章节状态

修改书籍按钮的点击事件，设置selectedBook的同时清空chapter状态：

// 原代码
onClick={() => setSelectedBook(book.id)}

// 修改后
onClick={() => {
  setSelectedBook(book.id);
  setChapter(null); // 或你定义的初始值，比如undefined/0
}}

2. 优化章节列表更新的Effect

确保切换书籍时，不仅更新章节列表，还清空旧章节文本，避免内容残留：

useEffect(() => {
  const targetBook = bibleArray.find(book => book.id === selectedBook);
  setBookChapters(targetBook?.chapters || []);
  setChapterText([]); // 清空旧章节文本
  setChapter(null); // 双重保险：强制重置章节状态
}, [selectedBook, bibleArray]); // 新增bibleArray依赖，避免闭包引用过期数据

3. 修复无依赖的Effect（解决无限重渲染隐患）

原代码最后一个useEffect无依赖项，会导致组件每次渲染都执行，严重影响性能且逻辑混乱。修改为依赖正确的状态：

// 原代码
useEffect(() => { 
   bibleArray.filter(chapter => chapter);
   const subsetBibleArray = bibleArray.map( text => text.cleanText ); 
   setChapterText(subsetBibleArray);
});

// 修改后
useEffect(() => {
  if (bibleArray.length > 0) {
    const subsetBibleArray = bibleArray.map(text => text.cleanText);
    setChapterText(subsetBibleArray);
  }
}, [bibleArray]); // 仅当bibleArray变化时执行

4. 优化API请求逻辑（可选）

添加请求取消机制，避免旧请求覆盖新请求的结果：

useEffect(() => {
  const abortController = new AbortController();
  
  if (selectedBook && chapter) {
    dispatch(fetchBibleBookChapter({ selectedBook, chapter }, { signal: abortController.signal }));
  }
  
  return () => abortController.abort(); // 组件卸载或依赖变化时取消请求
}, [dispatch, selectedBook, chapter]);

额外优化：旧约/新约切换逻辑 #

原代码点击旧约/新约按钮时未重置另一状态，可能导致两个书籍列表同时显示。修改按钮点击事件：

// 旧约按钮
onClick={() => {
  setClickedOT(true);
  setClickedNT(false);
}}

// 新约按钮
onClick={() => {
  setClickedNT(true);
  setClickedOT(false);
}}

修复原理 #

• 重置chapter状态后，切换书籍时会清空旧章节上下文，让新的bookChapters数据能正常渲染章节按钮
• 修正Effect依赖后，避免了无效重渲染和过期状态引用问题
• 请求取消机制防止旧API响应覆盖新数据，提升交互体验

内容的提问来源于stack exchange，提问作者Herbie