title: Get an error cannot destructure property as it is undefined
body: <p>I try to get data from the backend and view that data in the frontend. To do this I tried this code.</p>
  <pre><code>function PostsLocation() {
  
      const { offerId } = useParams();
      console.log(offerId);
  
      const [posts, setPosts] = useState({});
      const [offerPosts, setOfferPosts] = useState({});
  
      useEffect(()=&gt;{
          getOnePost();
      }, []);
  
      const getOnePost = async () =&gt; {
          try {
              const response = await axios.get(`/buyerGetOneSellerOffer/${offerId}`)
              console.log(response);
              const allPost=response.data.oneOffer;
              setPosts(allPost);
          } catch (error) {
              console.error(`Error: ${error}`)
          }
      }
      console.log(posts);
  
      const PostId2=posts.postId
      console.log(PostId2);
      const type=typeof (PostId2);
      console.log(type);
  
      useEffect(()=&gt;{
          getOneOfferPost();
      }, []);
  
      useEffect(()=&gt;{
          if (offerPosts &amp;&amp; offerPosts.location) {
              console.log(offerPosts.location);
              console.log(offerPosts.location.longitude);
              console.log(offerPosts.location.latitude);
          }
      }, [offerPosts]);
  
      const getOneOfferPost = async () =&gt; {
          try {
              const response = await axios.get(`/buyerGetOnePost/${PostId2}`)
              console.log(response);
              const allOfferPost=response.data.onePost;
              setOfferPosts(allOfferPost);
          } catch (error) {
              console.error(`Error: ${error}`)
          }
      }
      console.log(offerPosts);
  
      const long = offerPosts?.location?.longitude;
      console.log(long);
      const lat=offerPosts?.location?.latitude;
      console.log(lat);
  
      const location={lat,long};
  }
  </code></pre>
  <p>In this code, I called the first API and get data successfully. This image shows the data I got from this <code>console.log(posts)</code> code.</p>
  <p><a href="https://i.stack.imgur.com/8bPZ7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8bPZ7.jpg" alt="Data get from first API" /></a></p>
  <p>Then I try to get this <code>posts.postId</code> ID to this variable <code>const PostId2</code>, I get this ID successfully. This image shows the ID that I got.</p>
  <p><a href="https://i.stack.imgur.com/4Yy1a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Yy1a.jpg" alt="ID image" /></a></p>
  <p>Then I try to pass this <code>PostId2</code> ID to the second API, but API call does not work. Then I try to restructure the ID <code>const {PostId2}=posts.postId</code> like this. Then I try again to call the second API but I got an error that says 'TypeError: Cannot destructure property 'PostId2' of 'posts.postId' as it is undefined'. How should I solve this problem?</p>