javascript - 为什么反应功能组件中的回调没有读取更新的状态值
问题描述
我正在尝试使用交叉点观察器在反应中实现无限滚动,但我面临的问题是在交叉点观察器的回调中我无法读取当前“页面”和“列表”的最新值,以便我可以获取数据下一页。
import ReactDOM from "react-dom";
import "./styles.css";
require("intersection-observer");
const pageSize = 30;
const threshold = 5;
const generateList = (page, size) => {
let arr = [];
for (let i = 1; i <= size; i++) {
arr.push(`${(page - 1) * size + i}`);
}
return arr;
};
const fetchList = page => {
return new Promise(resolve => {
setTimeout(() => {
return resolve(generateList(page, pageSize));
}, 1000);
});
};
let options = {
root: null,
threshold: 0
};
function App() {
const [page, setPage] = useState(1);
const [fetching, setFetching] = useState(false);
const [list, setlist] = useState(generateList(page, pageSize));
const callback = entries => {
if (entries[0].isIntersecting) {
observerRef.current.unobserve(
document.getElementById(`item_${list.length - threshold}`)
);
setFetching(true);
/* at this point neither the 'page' is latest nor the 'list'
*they both have the initial states.
*/
fetchList(page + 1).then(res => {
setFetching(false);
setPage(page + 1);
setlist([...list, ...res]);
});
}
};
const observerRef = useRef(new IntersectionObserver(callback, options));
useEffect(() => {
if (observerRef.current) {
observerRef.current.observe(
document.getElementById(`item_${list.length - threshold}`)
);
}
}, [list]);
return (
<div className="App">
{list.map(l => (
<p key={l} id={`item_${l}`}>
{l}
</p>
))}
{fetching && <p>loading...</p>}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
当前行为: “页面”和“列表”的值始终等于初始状态,而不是最新值。第 2 页后无限滚动不起作用
预期行为:在回调函数中,它应该读取状态“页面”和“列表”的更新值。
这是此演示的工作沙箱 https://codesandbox.io/s/sweet-sun-rbcml?fontsize=14&hidenavigation=1&theme=dark
解决方案
这里主要有两个问题,闭包和直接查询 DOM。
要解决闭包问题,请使用功能useState
和引用:
const listLengthRef = useRef(list.length);
const pageRef = useRef(page);
const callback = useCallback(entries => {
if (entries[0].isIntersecting) {
observerRef.current.unobserve(
document.getElementById(`item_${listLengthRef.current - threshold}`)
);
setFetching(true);
fetchList(pageRef.current + 1).then(res => {
setFetching(false);
setPage(page => page + 1);
setlist(list => [...list, ...res]);
});
}
}, []);
const observerRef = useRef(new IntersectionObserver(callback, options));
useEffect(() => {
listLengthRef.current = list.length;
}, [list]);
useEffect(() => {
pageRef.current = page;
}, [page]);
尽管此代码有效,但您应该替换document.getElementById
为引用,在这种情况下,它将是对页面最后一个元素的引用。
推荐阅读
- postgresql - 对 generate_series 进行强制转换给出:错误:在不能接受集合的上下文中调用的集合值函数
- css - 如何仅将溢出 y 添加到特定 div
- c# - MATLAB Feval C# 客户端缓存问题
- symfony - 从 4.2.1 更新 Symfony。到 4.2.2。破坏网络应用程序
- r - 重新编码月份系数
- karate - [空手道][独立 v0.9.1] 错误:找不到或读取文件:文件:xxx/yyy/zzz/./karate-config.js
- javascript - 使用 Angular.js 在数据表 jQuery 的每一行中添加一个复选框
- jasmine - lodash 函数在 angular6 和 jasmine 测试用例中无法识别
- php - PHP 在执行脚本期间请求用户数据
- visual-studio - 为 UWP 应用购买和集成外部证书