React useState/useEffect条件渲染切换组件DOM延迟问题

安全阿岳

2026-8-26

问题根因

双击才生效的核心原因：React状态更新是异步批处理的，同一执行上下文里调用状态更新方法后，读取到的状态仍是当前渲染闭包捕获的旧值，不是刚更新的新值。
你在toggleActive里先调用setState更新appState，紧接着就拿appState.activeImage做判断，这时候读到的appState是点击前的旧状态，不是刚传入setState的新值，导致判断逻辑永远慢一拍：第一次点击时判断用的是初始状态的activeImage: "null"，第二次点击时才能读到第一次点击设置的activeImage值，正好对应你遇到的“首次点击无响应、第二次才出正确结果”的现象。

代码里还存在几个会引发其他异常的问题：

useState解构语义完全写反：React的useState固定返回[当前状态值, 状态更新函数]结构，你写的const [setVisualOption, changeVisualOption] = useState(false)把状态值命名成了更新函数的名字，把更新函数命名成了普通变量名，虽然语法上能跑，但后续维护极容易出逻辑错误
JSX语法错误：className="list-box-right缺少闭合双引号
组件标签不匹配：图片组件开标签是<ImageComponent>，闭标签写成了</SingleImage>，会直接触发编译报错
冗余代码：空实现的useEffect、map循环里包裹的空<></>Fragment没有任何实际作用
业务逻辑不匹配：需求明确说明用video字段判断媒体类型（video为字符串'null'时展示图片），你却用image字段做判断，也没用到存储的视频地址字段，即使修复双击问题也会出现判断错误

修复后的完整代码

function Display({ objects }) {
  // 修正useState命名语义：第一个返回值是状态，第二个是更新函数
  const [isVideo, setIsVideo] = useState(false);

  const [appState, setState] = useState({
    myObjects: objects,
    activeTitle: "null",
    activeImage: "null",
    activeVideoUrl: "null",
  });

  function toggleActive(index) {
    // 先拿到当前点击项的最新数据，不依赖异步更新后的state做判断
    const currentItem = appState.myObjects[index];
    const currentImage = currentItem.image[0].mediaItemUrl;
    const currentVideo = currentItem.mediastreamurl;
    
    // 一次性更新所有状态
    setState({
      ...appState,
      activeTitle: currentItem.title,
      activeImage: currentImage,
      activeVideoUrl: currentVideo,
    });
    // 直接用当前项的video字段判断：video为'null'展示图片，否则展示视频
    setIsVideo(currentVideo !== 'null');
  }

  return (
    <div className="display">
      {/* 补全className闭合引号 */}
      <div className="list-box-right">
        {appState.myObjects.map((element, index) => (
          // 删除多余空Fragment，key直接绑定在最外层元素
          <div
            key={index}
            className="menu-item"
            onClick={() => toggleActive(index)}
          >
            {element.title}
          </div>
        ))}
      </div>
      <div className="right-grid">
        {isVideo ? (
          <VideoComponent videoUrl={appState.activeVideoUrl} />
        ) : (
          // 修正闭合标签和开标签一致
          <ImageComponent activeImage={appState.activeImage} />
        )}
      </div>
    </div>
  );
}

可选优化

没必要把上层传入的objects再存一份到组件state，直接读取props里的objects即可，多存一份会导致上层props更新时组件内部状态不同步
React 16.8+版本不需要把所有状态塞到一个对象里，激活标题、激活图片、激活视频、是否展示视频都可以拆成独立的useState，更新时不需要手动展开旧状态，逻辑更清晰
列表渲染不要用数组下标当key，最好用WordPress返回的内容唯一ID（比如post ID、mediaItemId），避免列表排序、增删时出现状态错位

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