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

问题描述

我正在尝试为我的 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的情况？

解决方法

currentCardNumber 是否未定义？

,

更新：

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

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