未处理的拒绝（TypeError）：无法读取 null 的属性“id”答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read property 'id' of null未处理的拒绝（TypeError）：无法读取 null 的属性“id”
【发布时间】：2021-06-02 09:55:26
【问题描述】：

enter image description here*当我点击添加到购物车时。我在终端得到这个。我卡住了。请帮忙。未处理的拒绝 (TypeError)：无法读取 null 的属性“id”。当我单击添加到购物车时。我在终端得到这个。我卡住了。请帮忙。未处理的拒绝（TypeError）：无法读取 null 的属性“id” 当我单击添加到购物车时。我在终端得到这个。我卡住了。请帮忙。未处理的拒绝 (TypeError)：无法读取 null 的属性“id”。请注意我必须删除一些代码

Shopcontext.js

class ShopProvider extends Component {

    state = {
        product: {},
        products: [],
        checkout: {},
        isCartOpen: false,
        isMenuOpen: false
    }

    componentDidMount() {
        if (localStorage.checkout_id) {
            this.fetchCheckout(localStorage.checkout_id)

        } else {
            this.createCheckout()
        } 
    }


    addItemToCheckout = async (variantId, quantity) => {
      const lineItemsToAdd = [
        {
          variantId,
          quantity: parseInt(quantity, 10)
        }
      ]


         const checkout = await client.checkout.addLineItems(this.state.checkout.id, lineItemsToAdd)
          this.setState({ checkout: checkout })
          console.log(checkout);
          this.openCart();
        }

  fetchAllProducts = async () => {
        const products = await client.product.fetchAll();
        this.setState({ products: products });
      };
    

    fetchProductWithHandle = async (handle) => {
        
        const product = await client.product.fetchByHandle(handle)
        this.setState({ product: product})
    }



    render() {
        return (
          <ShopContext.Provider
          value={{
            ...this.state,
            fetchAllProducts: this.fetchAllProducts,
            fetchProductWithHandle: this.fetchProductWithHandle,
            addItemToCheckout: this.addItemToCheckout,
            removeLineItem: this.removeLineItem,
            closeCart: this.closeCart,
            openCart: this.openCart,
            closeMenu: this.closeMenu,
            openMenu: this.openMenu
          }}
          >
            {this.props.children}
          </ShopContext.Provider>
        );
      }
    }
const ShopConsumer = ShopContext.Consumer

export { ShopConsumer, ShopContext };

export default ShopProvider



**Product page**


const ProductPage = () => {

    const { handle } = useParams();


    const { fetchProductWithHandle, addItemToCheckout, product } = useContext(ShopContext)

    useEffect(() => {
        fetchProductWithHandle(handle)
    }, [fetchProductWithHandle, handle])
    
    if (!product.title) return <div>Loading....</div>
        return (
            <Box>
                
                        <Button
                            onClick={() => addItemToCheckout(product.variants[0].id, 1)}
                        >
                            Add To Cart 
                        </Button>
                    
            </Box>
        )
    }

export default ProductPage;*

【问题讨论】：

您还应该包括产品来源的上下文部分。尝试console.log(product) 并检查浏览器控制台中的内容（截屏并将其包含在您的问题中）。很可能数据的使用方式有误
是的。 fetchAllProducts = async () => { const products = await client.product.fetchAll(); this.setState({ 产品：产品 }); }; fetchProductWithHandle = async (handle) => { const product = await client.product.fetchByHandle(handle) this.setState({ product: product}) }
您在取货后看到产品了吗？ fetchAllProducts 函数中的 console.log(products) 并检查您是否真的在获取数据
您没有在产品对象中获得变体数组确保您在产品对象中获得变体数组。尝试在控制台中记录产品对象以检查您得到了什么。
是的，亚历克斯。我拿到产品后就拿到了，没问题。我只是无法添加到购物车

标签： reactjs shopify shopify-app

【解决方案1】：

这是这个问题的一般答案，希望有人能从中受益所以当你遇到错误时的问题：Cannot read property '****' of null 是你试图映射到一个空对象所以首先尝试查看对象并验证它为空的方式并验证该对象容器 ID 或不管是什么，有时对象需要时间来渲染所以这就是为什么它会出现这个问题所以当我使用像{object.id&&(<div>....</div)}这样的元素时如何避免它添加条件希望这个答案可以帮助某人:)

【讨论】：