第一次渲染状态为空，导致错误。如何解决这个问题？

Question

我正在尝试显示我的 cardNumber 的条形码，如下所示：

import "./Home.css";
import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import { useBarcode } from "react-barcodes";

const Cards: React.FC = () => {
  
 const [cardNumber, setCardNumber] = useState("");
 const [content, setContent] = useState("");

//I'm adding a 0 at the beginning of cardNumber, because I need to do so
 const cardNumberwithDigits = "" + 0 + cardNumber;

  const { inputRef } = useBarcode({
    value: cardNumberwithDigits 
    options: {
      background: "#dae2e4",
      format: "EAN8",
      text: cardNumber,
    },
  });


  //get the cardNumber
  useEffect(() => {
    axios
      .get("/cards/xx")
      .then(
        (response) => {
          setCardNumber(response.data.cardId);
        },
        (error) => {
          const _content =
            (error.response && error.response.data) ||
            error.message ||
            error.toString();

          setContent(_content);
        }
      );
  }, []);


  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
         
            <div>
              <svg ref={inputRef} />
            </div>   
   
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default Cards;

问题是 cardNumber 在 Cards.tsx 的第一个渲染中最初是空的，所以我得到了错误： Error: "0" is not a valid input for e 因为 cardNumber 最初是 "" 并且在与 0 连接后，cardNumberwithDigits 是 "0"，这不是 barCode 的有效值。如何解决问题，直接获取cardNumber的值，避免为空或0的情况？

Answer 1

currentCardNumber 是否未定义？

Answer 2

更新：

我找到了解决方案。好像是格式的问题。 “0”是 EAN8 格式的无效输入，但不是格式的 CODE128 ，因此我将在这种情况下使用三元表达式。每次 cardNumberwithDigits !== "0" 使用格式 EAN8 ，否则使用格式 CODE128.

format:
        cardNumberwithDigits !== "0"
          ? "EAN8"
          : "CODE128",

第一次渲染状态为空，导致错误。如何解决这个问题？

State is empty in the first render, causing an error. How to solve this?

reactjs

ionic-framework

ionic-react