我有從我的 Api 帖子中獲取并顯示它的 React 代碼。
當我試圖用 顯示帖子時map,我useState在里面使用了map,我得到了這個錯誤:
Error: Rendered more hooks than during the previous render.
當我洗掉 useState 時,它??起作用了。
這是我的代碼
import {useState,useContext,useEffect} from "react"
import {username} from "./username"
const PostDisplay = (post) => {
const [try, setTry] = useState("")
return (
<div>Hello</div>
);
}
function Home(){
const [loggedIn,setLoggedIn] = useContext(username)
const [posts, setPosts] = useState([])
useEffect(() => {
fetch("/posts")
.then((response) => response.json())
.then((data) => {
setPosts(data)
console.log(data)
})
}, [])
if(loggedIn){
return (
<div align="center">
<br/>
<br/>
<div>
{posts.map(PostDisplay)}
</div>
</div>
)
}
else{
return (
<div>
<h1 align="center">You are not logged in!</h1>
</div>
)
}
}
export default Home
請幫我。
uj5u.com熱心網友回復:
您不能像在地圖中那樣分配 React 組件
{posts.map((post) => <PostDisplay post={post}/>)}
遍歷陣列并將值作為 prop 傳遞給組件。
const PostDisplay = ({post}) => {
const [try, setTry] = useState("")
return (
<div>Hello </div>
);
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/417643.html
標籤:
上一篇:如何在數量不為空的情況下單擊提交時在JqueryArray中獲取輸入值
下一篇:從React串列中編輯待辦事項
