我正在尝试使用 stopPropagation，以便在单击任何其他元素后我的下拉菜单将关闭。
当我尝试使用 stopPropagation 并更新布尔状态时，按钮重新渲染页面（将状态重置回“false”），而不是将状态更新为 true，并且无论如何它都会停留在“true”上。
我写了一个例子的代码：
import { useEffect, useState } from "react";
export default function IndexPage() {
const [state, setState] = useState(false);
useEffect(() => {
document.body.addEventListener("click", () => {
setState(false);
});
});
const onButtonClick = (e) => {
e.stopPropagation();
setState(!state);
};
console.log(state);
return (
<div>
<button onClick={onButtonClick}>Click</button>
<h1>{state ? "true" : "false"}</h1>
</div>
);
}这个问题似乎只出现在 Next.js 中
我用React应用程序编写了相同的代码，没有问题。
Next.js 代码和盒子链接
React 代码和盒子链接
编辑：
当您分叉 Next.js 沙箱项目时，一切都工作正常。（但它并不能解决我的原始代码的问题）。
任何人都知道为什么会发生这种情况？
当我尝试从 firestore 保存查询快照时，它返回为q: Query<DocumentData>，而我的查询快照为querySnap: QuerySnapshot<DocumentData>。
DocumentData 类型是： [field: string]: any;我无法循环遍历它而不出现任何错误。
我的效果代码
useEffect(() => {
const fetchListings = async () => {
try {
// Get reference
const listingsRef = collection(db, "listings");
// Create a query
const q = query(
listingsRef,
where("type", "==", params.categoryName),
orderBy("timestamp", "desc"),
limit(10)
);
// Execute query
const querySnap = await getDocs(q);
let listings: DocumentData | [] = [];
querySnap.forEach((doc) => {
return listings.push({ id: doc.id, data: doc.data() });
});
setState((prevState) => …