React-Bootstrap按钮条件文本偶尔失效，报insertBefore错误求助

问题场景 #

使用React-Bootstrap的Button组件，依据liked布尔值切换按钮文本，但文本偶尔切换失效，控制台报错：

Failed to execute 'insertBefore' on 'Node'

Icon组件（随liked切换为BsBookmarkDash或BsFillBookmarkCheckFill）始终正常显示。liked变量通过自定义useLocalStorage Hook管理：

const key = `like-${id}`
const [liked, setLiked] = useLocalStorage(key, false)

Button组件代码：

<Button
  className="btn-omega has-icon"
  onClick={() => { handleFavsClick(data.products)}}
  variant=""
>
  <Icon size="1.75rem" />
  &nbsp;&nbsp;
  { liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</Button>

可能原因 #

• useLocalStorage同步逻辑缺陷：自定义Hook读取localStorage值时若存在异步延迟，会导致组件渲染时liked值未及时更新，引发DOM操作冲突。
• 组件复用无唯一标识：若Button在列表中渲染且未设置唯一key，React可能复用DOM节点，导致文本切换时DOM操作异常。
• 硬编码空格干扰DOM Diff：  这类原生HTML字符，可能在文本切换时干扰React的DOM diff算法，触发insertBefore错误。

解决方案 #

1. 修复useLocalStorage同步逻辑

确保Hook在组件挂载时同步读取localStorage值，避免异步延迟导致的初始值不一致：

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

2. 给Button添加唯一key

若Button在列表中渲染，用唯一标识（比如id）作为key，避免React复用DOM节点：

<Button
  key={id}
  className="btn-omega has-icon"
  onClick={() => { handleFavsClick(data.products)}}
  variant=""
>
  <Icon size="1.75rem" />
  <span className="ms-2"></span>
  { liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</Button>

3. 替换硬编码空格为CSS间距

用CSS margin/padding控制间距，替代  减少DOM节点干扰：

<Button
  className="btn-omega has-icon"
  onClick={() => { handleFavsClick(data.products)}}
  variant=""
>
  <Icon size="1.75rem" className="me-2" />
  { liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</Button>

4. 强制组件重新渲染（兜底方案）

通过动态key强制Button重新渲染，确保文本更新：

<Button
  key={`btn-like-${id}-${liked}`}
  className="btn-omega has-icon"
  onClick={() => { handleFavsClick(data.products)}}
  variant=""
>
  <Icon size="1.75rem" className="me-2" />
  { liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</Button>

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