我正在創建一個與 instagram 功能相似的應用程式，但在發布新照片時遇到了問題。當用戶發布新照片時，它會保存到此狀態。
const [posts, setPosts] = useState([]);
當頁面呈現并且 useEffect 運行時，影像不會顯示在螢屏上，因為它是異步的，所以我所做的是將“posts”作為依賴項添加到 useEffect 中。我認為這創建了一個無限回圈，因為它會呼叫自己，但我不確定是否有任何其他方法可以解決這個問題。這是 useEffect 代碼。
useEffect(() => {
const getPosts = async () => {
const data = await getDocs(postCollectionRef);
setPosts(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
}
getPosts()
}, [])
uj5u.com熱心網友回復：
當帖子位于依賴陣列中時，您認為 useEffect 導致無限回圈是正確的。你的 useEffect 依賴陣列不需要包含你的 'posts' useState，因為假設你的帖子狀態被用來顯示內容，當狀態自動改變時，你的 React 組件會重新渲染自己。
uj5u.com熱心網友回復：
據我了解，
您可以在顯示影像之前等待 API 回應，因此您可以添加一個新的加載狀態，一旦 API 請求完成，該狀態將變為 false。
檢查下面的代碼
function App() {
const [posts, setPosts] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
const getPosts = async () => {
try {
const data = await getDocs(postCollectionRef);
setPosts(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
} catch {
// handle errors
} finally {
setLoading(false)
}
}
getPosts()
}, []);
return (
{!loading && posts.map(post => <p>{post.image}</p>)}
)
}
uj5u.com熱心網友回復：
是的。添加依賴陣列告訴 React 在狀態更新posts時呼叫 useEffect 。posts再一次，您正在更新postsuseEffect 中的狀態。這就是導致無限回圈的原因。
posts我認為您應該只在加載頁面后渲染頁面。
const [posts, setPosts] = useState([]);
return (
<div>
{posts && <>{/* Render content here */}</>}
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/519719.html
標籤：Google Cloud Collective javascript反应火力基地