我正在尝试创建一个功能组件,从API获取数据并将其呈现到列表中。 在获取和呈现数据之后,我希望检查URL id和列表项是否相等,如果相等,则应将列表项滚动到视图中。
以下是我的代码:
以下是我的代码:
import React, { Fragment, useState, useEffect, useRef } from "react";
export default function ListComponent(props) {
const scrollTarget = useRef();
const [items, setItems] = useState([]);
const [scrollTargetItemId, setScrollTargetItemId] = useState("");
useEffect(() => {
const fetchData = async () => {
let response = await fetch("someurl").then((res) => res.json());
setItems(response);
};
fetchData();
if (props.targetId) {
setScrollTargetItemId(props.targetId)
}
if (scrollTarget.current) {
window.scrollTo(0, scrollTarget.current.offsetTop)
}
}, [props]);
let itemsToRender = [];
itemsToRender = reports.map((report) => {
return (
<li
key={report._id}
ref={item._id === scrollTargetItemId ? scrollTarget : null}
>
{item.payload}
</li>
);
});
return (
<Fragment>
<ul>{itemsToRender}</ul>
</Fragment>
);
}
我的问题是scrollTarget.current
总是undefined
。请指导我哪里做错了。提前感谢。
useLayoutEffect
而不是useEffect
会怎样呢?它应该在所有内容都被渲染之后再运行。 - JulienD