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

【问题标题】：State is empty in the first render, causing an error. How to solve this?第一次渲染时状态为空，导致错误。如何解决这个问题？
【发布时间】：2021-08-06 11:09:02
【问题描述】：

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

【问题讨论】：

我认为是格式的问题。尝试删除格式，看看它是否有效。
如果我删除格式：“EAN8”，它可以工作。但我需要使用这种格式。这是客户要求的。

标签： reactjs ionic-framework ionic-react

【解决方案1】：

currentCardNumber 是否未定义？

【讨论】：

我用 cardNumber 替换了 currentCardNumber。 const cardNumberwithDigits = "" + 0 + cardNumber;我编辑了这个问题。 currentCardNumber 不是必需的。我的错。我得到的错误是：Error: "0" is not a valid input for e 因为cardNumber 最初是“”，在与 0 连接后，cardNumberwithDigits 是“0”，这是 barCode 的无效输入。
如果cardNumber 为空，则添加条件渲染怎么样，您会返回其他内容。
@MohammadAbdulAlim，在这种情况下我收到此错误：Error: No element to render on was provided.

【解决方案2】：

更新：

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

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

【讨论】：