useQuery-無法讀取未定義的屬性-有解無憂

初始查詢回傳undefined，但所有后續呼叫都回傳有效資料。如果我嘗試映射我的回應，則會拋出錯誤：

can not read properties of undefined

整個應用程式都關閉了。我該如何解決？

import { useQuery } from "@apollo/client";
import { Component } from "react";
import { useState, useEffect } from "react";

import GET_PRODUCTS from '../../server/getProducts';

import './productList.sass';

class ProductList extends Component {

    render() {
        return (
            <RenderProducts />
        );
    }
}

const RenderProducts = () => {
    
    const { data } = useQuery(GET_PRODUCTS);
    console.log(data.products.map(product => console.log(product)));
    const products = data.products.map((product) => {
        return (
            <li className="productList__item">
                <img className="productList__item-img" src={product.mainImage.url} alt={product.title} />
                    <div className="productList__item-descr">
                        <div className="productList__item-title">{product.title}</div>
                        <div className="productList__item-price">{product.price} $</div>
                </div>
            </li>
        )
    })
    return <ul>{products}</ul>
}

export default ProductList;

useQuery - 無法讀取未定義的屬性

uj5u.com熱心網友回復：

如果我嘗試映射我的回應，則會拋出一個錯誤：并且整個應用程式都已關閉。我該如何解決？

當查詢處于加載狀態時，您需要呈現一些內容。您可以利用hook的loading和error屬性。useQuery這是一個示例：

const RenderProducts = () => {
    
    const { data, loading, error } = useQuery(GET_PRODUCTS);

    if(loading) return <div>loading...</div>
    if(error) return <div>cannot render products...something went wrong</div>

    // if the query has finished loading products and there's no error, 
    // You can access data.products
    // and write your logic 
    console.log(data.products.map(product => console.log(product)));
    const products = data.products.map((product) => {
        return (
            <li className="productList__item">
                <img className="productList__item-img" src={product.mainImage.url} alt={product.title} />
                    <div className="productList__item-descr">
                        <div className="productList__item-title">{product.title}</div>
                        <div className="productList__item-price">{product.price} $</div>
                </div>
            </li>
        )
    })
    return <ul>{products}</ul>
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533621.html

標籤：反应图表数据库阿波罗

上一篇：useEffect在第一次渲染時未定義

下一篇：在React中的多個組件之間傳遞資料