React Chakra UI Accordion移动端默认关闭，需全端默认全展开求助

问题分析 #

你遇到的情况是Chakra UI Accordion在移动端默认面板关闭，但桌面/平板端正常展开，直接用defaultIndex不生效，只有加setTimeout延迟设置受控状态才有用。这大概率是移动端渲染时序问题——Accordion的DOM在挂载时还未完全初始化，导致defaultIndex的初始值没被正确应用；或者Chakra UI内部在响应式断点切换时，意外重置了面板状态。

可行解决方案 #

1. 用useLayoutEffect替代useEffect+setTimeout

useLayoutEffect会在DOM更新完成后同步执行，比useEffect更早触发，能避免延迟执行的hack写法，同时保证状态在DOM就绪时立即生效：

import { useState, useLayoutEffect } from 'react';
import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@chakra-ui/react';

const YourComponent = ({ defaultIndices }) => {
  const [openItems, setOpenItems] = useState<number[]>(defaultIndices || []);

  useLayoutEffect(() => {
    if (defaultIndices?.length > 0) {
      setOpenItems(defaultIndices);
    }
  }, [defaultIndices]);

  return (
    <Accordion index={openItems} onChange={setOpenItems}>
      {/* 你的AccordionItem内容 */}
      <AccordionItem>
        <AccordionButton>面板1</AccordionButton>
        <AccordionPanel>面板1内容</AccordionPanel>
      </AccordionItem>
      {/* 更多面板... */}
    </Accordion>
  );
};

2. 确保defaultIndices初始化时机正确

如果defaultIndices是通过异步请求获取的（比如API数据），移动端可能因为网络或渲染速度问题，在Accordion挂载时defaultIndices还是空数组，导致默认关闭。这种情况要等待数据就绪后再渲染Accordion：

const YourComponent = () => {
  const [defaultIndices, setDefaultIndices] = useState<number[]>([]);
  const [loading, setLoading] = useState(true);

  // 模拟异步获取数据
  useEffect(() => {
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => {
        setDefaultIndices(data.openPanelIndices);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>; // 或Chakra的Spinner组件
  }

  return (
    <Accordion defaultIndex={defaultIndices}>
      {/* 面板内容 */}
    </Accordion>
  );
};

3. 避免同时使用defaultIndex和index

当你使用受控模式（设置index）时，defaultIndex会被忽略，所以不要同时声明这两个属性，只保留index和onChange即可。

为什么setTimeout能生效？ #

延迟500ms执行setOpenItems，本质是给了DOM足够的初始化时间，此时Accordion已经完成挂载，设置index能正确触发面板展开。但这种写法是临时的hack，用useLayoutEffect或确保数据就绪的方式更可靠。

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