reactjs - "Objekt kan vara odefinierat" i React och TypeScript

certificate?: any;

<S.Contents>{certificate[0]}</S.Contents>
<S.Contents>{certificate[1]}</S.Contents>
<S.Contents>{certificate[3]}</S.Contents>

Om typen av props är inställd på any och används som ett index i en array, fungerar det bra. Men om du ändrar den typen any till Array kräver den generiska typen 'Array' 1 typargument. Jag får ett fel som detta.

När jag skriver ut typeof till konsolen, kommer objektet ut, så när jag ändrar det från Array till objekt får jag ett annat fel. "Object is possibly 'undefined'."

setCertificate(res.data.qualification.certificate);

Eftersom det är en originalarray försökte jag skapa element genom att göra om den till en map, men det fungerade inte heller med ett felmeddelande om att map inte är en funktion. Jag vet inte vad jag ska göra med mig själv. Hjälp.

Svar #1

Du måste alltid kontrollera om det finns möjliga null eller undefined-värden.

Så här skulle jag göra det för att göra det 100% säkert

return (<div> {
    certificate && certificate.length > 0 ? (
      certificate.map((item, index) => ( 
      <S.Contents key = {index}> {item}</S.Contents>
      ))
    ) : null
  } </div>)

Svar #2

Du får detta fel eftersom du använde en valfri egenskap för certifikat. Du behöver lägga till en kontroll för undefined för att försäkra dig om att det faktiskt är definierat. Om vi antar att din React-funktion ser ut ungefär så här, skulle detta vara ett snabbt sätt att lösa ditt problem:

function ReactComponent(props: {
    certificate?: any[]
}) {
  const certificate = props.certificate || [];
  
  return (
        {certificate.map((certificateItem) => (
            <S.Contents>{certificateItem}</S.Contents>
        ))}
  );
}

Denna rad const certificate=props.certifate || []; tilldelar det första värdet om det inte är undefined till variabeln certificate, annars det andra. Ett if-uttryck skulle också fungera men skulle vara mer omfattande i detta fall:

function ReactComponent(props: {
    certificate?: any[]
}) {
  let certificate = props.certificate;

  if(typeof certificate === "undefined") {
      certificate = [];
  }
  return  (
    <div>
        {certificate.map((certificateItem) => (
            <S.Contents>{certificateItem}</S.Contents>
        ))}
    </div>
  );
}