Stack Exchange
Get an error cannot destructure property as it is undefined
I try to get data from the backend and view that data in the frontend. To do this I tried this code.
function PostsLocation() {

    const { offerId } = useParams();
    console.log(offerId);

    const [posts, setPosts] = useState({});
    const [offerPosts, setOfferPosts] = useState({});

    useEffect(()=>{
        getOnePost();
    }, []);

    const getOnePost = async () => {
        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(()=>{
        getOneOfferPost();
    }, []);

    useEffect(()=>{
        if (offerPosts && offerPosts.location) {
            console.log(offerPosts.location);
            console.log(offerPosts.location.longitude);
            console.log(offerPosts.location.latitude);
        }
    }, [offerPosts]);

    const getOneOfferPost = async () => {
        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};
}

In this code, I called the first API and get data successfully. This image shows the data I got from this console.log(posts) code.

Then I try to get this posts.postId ID to this variable const PostId2, I get this ID successfully. This image shows the ID that I got.

Then I try to pass this PostId2 ID to the second API, but API call does not work. Then I try to restructure the ID const {PostId2}=posts.postId 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?

Your PostId2 variable is being populated as a result of the API call which happens in the first useEffect. Since the API call is async and the data isn't available on the initial render, the call to getOneOfferPost in useEffect doesn't get the updated id.
Also destructuring fails because the value isn't available initially.
To solve this, add PostId2 as dependency to useEffect which calls getOneOfferPost and add a conditional check before the API call
const getOneOfferPost = async () => {
  if(PostId2 !== undefined) {
    try {
        const response = await axios.get(`/buyerGetOnePost/${PostId2}`)
        console.log(response);
        const allOfferPost=response.data.onePost;
        setOfferPosts(allOfferPost);
    } catch (error) {
        console.error(`Error: ${error}`)
    }
  }
}
const PostId2=posts.postId

useEffect(()=>{
    getOneOfferPost();
}, [PostId2]);


this works for me and I understand what the error was, appreciate your help.
