由于 useEffect 由 selectedPost 触发，useState 挂钩正在破坏 activePost答案

【问题标题】：useState hook is breaking activePost as useEffect is triggered by selectedPost由于 useEffect 由 selectedPost 触发，useState 挂钩正在破坏 activePost
【发布时间】：2022-01-26 17:02:55
【问题描述】：

我的目标是从 Graphcms 获取帖子并填充一个数组 - 帖子，并将其填充到 postlist 中，然后主要组件将根据用户点击 postlist 中的帖子而改变，我可以看到帖子数组已填充，但是当我点击 postlist 上的帖子时，出现以下错误

Main.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'featuredImage') 在我的文件下面

App.js

function App() {

 const [selectedPost,setSelectedPost] = useState(0);
 const [posts, setPosts] = useState([]);


 useEffect(() => {
   const fetchPosts = async () => {
     const { posts } = await request(
       'https://api-ap-southeast-2.graphcms.com/v2/ckxo1np9m5kw601xpccps4lrn/master',
       `
     { 
       posts {
         id
         title
         slug
         excerpt
         featuredImage
         {
           url
        }
       }
     }
   `
     );
     console.log("print posts " , posts)
     setPosts(posts);
   };

   fetchPosts();
 }, []);

  return ( <div className='app'>
    <Header/>
    {
      posts.length>0 && (<>
        <Main posts={posts} selectedPost={selectedPost}/>  
        <PostList posts={posts} setSelectedPost={setSelectedPost} />
        </>
      )
    }

  
  </div>
  )
}

export default App;

还有 Main.js 组件

const Main = ({selectedPost,posts}) => {

    const[activePost,setActivePost] =useState(posts[0])
    console.log("activePost ", activePost)

    useEffect(()=>{
      setActivePost(posts[selectedPost])
    },[posts,selectedPost])
  


    return (
        <div className='main'>
            <div className='mainContent'>
                <div className='postHighlight'>
                    <div className='postContainer'>
                    <img 
                    className='selectedPost'
                    src= {activePost.featuredImage.url}
                    alt=''
                    />
                </div>
                </div>
            
            <div className='postDetails' style={{color:'#fff'}}>
                <div className='title'>
                   {activePost.title} </div>
                    <span className='itemNumber'></span>
                    <span className='postExcerpt'>{activePost.excerpt}</span>
                 
                </div>

           <div className='otherDetails'>
           
          </div>
        </div>
        </div>
    )
}

export default Main

然后我们有 postList.js 文件

const PostList = ({posts,setSelectedPost}) => {
    return (
        <div className='postList'>
            {posts.map(post=>(
                    <div onClick={()=>setSelectedPost(post.id)}>
                        <CollectionCard key={post.slug} title={post.title} excerpt={post.excerpt} imageSrc={post.featuredImage.url}/>

                    </div>
             )) })
            
        </div>
    )
}

export default PostList

【问题讨论】：

标签： javascript reactjs graphql

【解决方案1】：

根据您的应用，您正在使用所选帖子的索引。错误来自您的 onclick 函数。您将post.id 传递给setSelectedPost()，因此您错误地访问了posts 数组。因此，undefined。只需在 map 函数上使用当前的 index：

<div className='postList'>
  {posts.map((post, index) => (
     <div onClick={() => setSelectedPost(index)} key={post.slug}>
       <CollectionCard
          title={post.title}
          excerpt={post.excerpt}
          imageSrc={post.featuredImage.url}
       />
     </div>
    ))
   }         
</div>

【讨论】：