无法在nextJs中读取nextJs中的razorpay付款的null属性“”tagName“”

import React, { useEffect, useState } from 'react';

const PaymentComponent = () => {
  const [paymentData, setPaymentData] = useState(null);

  useEffect(() => {
    // 假设fetchPaymentData是一个异步函数，用于获取支付数据
    const fetchPaymentData = async () => {
      try {
        const response = await fetch('/api/razorpay'); // 假设这是你的API端点
        const data = await response.json();
        setPaymentData(data);
      } catch (error) {
        console.error('Error fetching payment data:', error);
      }
    };

    fetchPaymentData();
  }, []);

  return (
    <div>
      {paymentData ? (
        <div>
          {/* 使用可选链操作符来安全地访问属性 */}
          <p>Tag Name: {paymentData?.tagName}</p>
        </div>
      ) : (
        <p>Loading payment data...</p>
      )}
    </div>
  );
};

export default PaymentComponent;