Ошибка типа Get не может деструктурировать свойство, поскольку оно не определено в React

avatar
Walpita
8 августа 2021 в 17:04
4051
1
0

У меня есть коллекция MongoDB, и внутри этой коллекции есть несколько документов. В этих документах я сохранил некоторые идентификаторы документов другой коллекции. Это изображение этого документа.

An image of a document

В интерфейсе я получаю доступ к этому документу и получаю postId. Я пробовал так.

const onePostId=posts.postId
console.log(onePostId);
const type=typeof (onePostId);
console.log(type);

Эта часть кода дает мне этот результат.

Image of the result

Я пытаюсь передать этот postId в API const response = await axios.get(`/buyerGetOnePost/${onePostId}`) следующим образом. Но этот postId является строковым типом, я думаю, поэтому я не могу получить результаты от этого API. Затем я пытаюсь сделать так const {onePostId}=posts.postId, после чего получаю сообщение об ошибке «TypeError: невозможно деструктурировать свойство onePostId из postId, поскольку оно не определено». Как решить эту проблему?

Это полный код, который я попробовал.

function PostsLocation() {

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

    const [posts, setPosts] = 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 onePostId=posts.postId
    console.log(onePostId);
    const type=typeof (onePostId);
    console.log(type);

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

    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/${onePostId}`)
            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};

}

На изображении ниже показаны результаты после console.log(posts). enter image description here

Источник
neeraj tk
8 августа 2021 в 17:31
0

Можете быть более конкретными? Насколько я понимаю, вы правильно получили ответ API и сохранили его в posts . Где вы столкнулись с проблемой после этого?

Walpita
8 августа 2021 в 17:55
0

@NeERAJTK Я пытаюсь получить postId из вышеупомянутого документа и получаю его, как я уже упоминал на втором изображении выше. Затем я пытаюсь передать этот postId этому API /buyerGetOnePost/${onePostId}. Здесь я получаю проблему. Я думаю, потому что postId — это строка. Но я понятия не имею, как это решить.

neeraj tk
8 августа 2021 в 18:01
0

Можете ли вы поделиться полным кодом?

Walpita
8 августа 2021 в 18:08
0

@NeERAJTK Я отредактировал это и добавил полный код, который пробовал.

Walpita
8 августа 2021 в 18:25
0

@NeERAJTK Я добавил еще одно изображение, которое показывает результаты после console.log(posts).

Golamrabbi Azad
8 августа 2021 в 18:38
0

когда вы разрушаете свойство onePostId, которого нет в сообщениях. вот почему вы получаете ошибку. Итак, деструктурируйте postId следующим образом: const {onePostId:postId} = posts или обычным способом const onePostId = posts.postId.

Ответы (1)

avatar
innocent
8 августа 2021 в 18:51
1

Вы пытаетесь деструктурировать значение без предварительного получения данных. Итак, вы получаете сообщение об ошибке.

Вы запускаете приведенный ниже код для сообщений при запуске, когда у него нет данных

 const onePostId=posts.postId

и только после вызова

    getOnePost();

ваши данные заполняются, но есть временная задержка, которую вы всегда должны учитывать с синтаксисом асинхронного ожидания, и вы должны сначала проверить, содержат ли сообщения posts.postId с некоторым значением или если оно определено, а затем выполнить деструктурирование. Если это не так, то, вероятно, не используйте его, либо дождитесь его, либо верните загрузку, либо, возможно, верните фиктивное значение.

например:

if(!posts.postId){
        //  posts.postId is not set and it doesn't have data 
}
Walpita
8 августа 2021 в 19:34
0

Я понимаю, в чем проблема. Но я не понимаю, как это решить. Как мне дождаться получения данных о сообщениях? Что я должен делать?

innocent
11 августа 2021 в 21:36
1

Вы уже ожидаете установки данных (вы использовали асинхронное ожидание), но до того, как данные будут установлены в сообщениях, вам, вероятно, следует отобразить код условно, вы, вероятно, могли бы вернуть простой div с оператором загрузки, подобным этому, или инициализировать с помощью mock стоимость и тд..