未处理的拒绝类型错误： 无法读取 null 的属性'id'

Question

单击添加到购物车时，请在此处输入图像描述。我在航站楼拿到这个。我被卡住了。请帮忙。未处理的拒绝(TypeError(：无法读取null的属性"id"。当我点击添加到购物车。我在航站楼拿到这个。我被卡住了。请帮忙。未处理的拒绝(TypeError(：当我单击"添加到购物车"时，无法读取null的属性"id"。我在航站楼拿到这个。我被卡住了。请帮忙。未处理的拒绝(TypeError(：无法读取null的属性"id"。请注意，我不得不剪掉上的一些代码

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;*

Answer 1

id未定义，因为变量数组为空添加未定义的句柄条件

addItemToCheckout(product.variants[0]?product.variants[0].id:NaN,1)