React Error: Rendered more hooks than during the previous render. when using useState and map

Question

我有从我的 Api 帖子中获取并显示它的 React 代码。

当我尝试显示带有 map 的帖子时，我在 map 中使用了 useState，但出现了这个错误：

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

请帮助我。

Answer 1

您不能像在地图中那样分配 React 组件

{posts.map((post) => <PostDisplay post={post}/>)}

遍历数组并将值作为 prop 传递给组件。

const PostDisplay = ({post}) => {

  const [try, setTry] = useState("")

  return (
    <div>Hello </div>
  );


}

React Error: Rendered more hooks than during the previous render. when using useState and map

React Error: Rendered more hooks than during the previous render. when using useState and map

reactjs

use-state