React Hooks页面加载时滚动到指定元素问题求助

我来帮你分析下问题所在，以及怎么修复这个问题。

问题根源 #

你的代码里scrollTarget.current一直是undefined，主要有两个核心原因：

1. 异步数据加载与ref绑定的时机不匹配
   组件第一次渲染时，items是初始空数组，map方法不会生成任何<li>元素，所以scrollTarget根本没有绑定到任何DOM节点上。而你在第一个useEffect里直接尝试访问scrollTarget.current，此时它必然是undefined。
   哪怕之后异步请求完成，setItems更新了状态触发重新渲染，原来的useEffect里的滚动逻辑也不会再次执行（除非props发生变化），错过了ref绑定后的时机。

2. 滚动逻辑没有等待必要条件就绪
   你需要同时满足三个条件才能成功滚动：数据加载完成（items有内容）、目标ID已设置（scrollTargetItemId有效）、对应的DOM元素已渲染并绑定了ref。但你的代码里没有等待这三个条件同时满足就执行滚动。

修复方案 #

我们可以拆分useEffect，让不同逻辑各司其职，同时确保滚动操作只在所有条件就绪后执行。修改后的代码如下：

import React, { Fragment, useState, useEffect, useRef } from "react";

export default function ListComponent(props) {
  const scrollTarget = useRef();
  const [items, setItems] = useState([]);
  // 直接用props.targetId初始化，减少一次状态更新
  const [scrollTargetItemId, setScrollTargetItemId] = useState(props.targetId || "");

  // 单独处理数据获取，仅在组件挂载时执行一次
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch("someurl");
        const response = await res.json();
        setItems(response);
      } catch (err) {
        console.error("数据加载失败：", err);
      }
    };
    fetchData();
  }, []);

  // 监听props.targetId的变化，实时更新目标ID
  useEffect(() => {
    if (props.targetId) {
      setScrollTargetItemId(props.targetId);
    }
  }, [props.targetId]);

  // 当数据或目标ID变化时，检查条件并执行滚动
  useEffect(() => {
    // 确保数据已加载、目标ID有效，且ref已绑定到DOM节点
    if (items.length > 0 && scrollTargetItemId && scrollTarget.current) {
      window.scrollTo({
        top: scrollTarget.current.offsetTop,
        behavior: "smooth" // 可选，添加平滑滚动效果
      });
    }
  }, [items, scrollTargetItemId]);

  const itemsToRender = items.map((report) => (
    <li
      key={report._id}
      ref={report._id === scrollTargetItemId ? scrollTarget : null}
    >
      {report.payload}
    </li>
  ));

  return (
    <Fragment>
      <ul>{itemsToRender}</ul>
    </Fragment>
  );
}

关键修改点说明 #

• 拆分逻辑到不同useEffect：把数据获取、目标ID更新、滚动操作分开，每个useEffect只负责单一职责，避免逻辑混乱。
• 等待所有条件就绪再滚动：新增的useEffect依赖items和scrollTargetItemId，只有当数据加载完成、目标ID存在，且对应的DOM元素已渲染（ref已绑定）时，才执行滚动操作。
• 优化目标ID初始化：直接用props.targetId初始化状态，减少一次不必要的状态更新。
• 添加错误捕获：给异步请求加上try/catch，方便排查数据加载失败的问题。

这样修改后，scrollTarget.current就不会再是undefined，滚动操作也能在正确的时机触发了。

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