Блог

Я пытаюсь ввести ответ API и отобразить его условно в компоненте react.

Мой API возвращает адрес доставки, который может быть либо почтовым адресом с атрибутами : type (должен быть "POSTAL" ), street , и streetNumber

ИЛИ адрес Packstation с атрибутами: type (должно быть "PACKSTATION" ) packstation , и postNumber .

Вот моя реализация для этого :

(ссылка на изолированную среду: https://codesandbox.io/s/competent-bird-dx2wp?file=/src/index.tsx:0-474 )

types.ts

 export enum AddressType {
  packstation = "PACKSTATION",
  postal = "POSTAL"
}

export interface PostalAddress {
  type: AddressType.postal;
  street: string;
  streetNumber: string;
}

export interface PackstationAddress {
  type: AddressType.packstation;
  packstation: string;
  postNumber: string;
}

export type DeliveryAddress = PostalAddress | PackstationAddress;
 

DeliveryAddressDisplay.tsx

 import * as React from "react";

import { DeliveryAddress, AddressType } from "./types";


interface Props {
  deliveryAddress: DeliveryAddress;
}

const DeliveryAddressDisplay = (props: Props) => {
  // im trying to get the type of the address here so i don't recalculate the same thing in my JSX
  const isPostalAddress: boolean = props.deliveryAddress.type === AddressType.postal;
  const isPackstationAddress: boolean = props.deliveryAddress.type === AddressType.packstation;


  return (
    <div className="App">
      <h2>
        {isPostalAddress amp;amp; <span>Street: {props.deliveryAddress.street}</span>}
      </h2>
      <h2>
        {isPackstationAddress amp;amp; (
          <span>Packstation: {props.deliveryAddress.packstation}</span>
        )}
      </h2>
      <h2>
        {isPostalAddress amp;amp; <span>Street Number: {props.deliveryAddress.streetNumber}</span>}
      </h2>
      <h2>
        {isPackstationAddress amp;amp; (
          <span>Packstation: {props.deliveryAddress.postNumber}</span>
        )}
      </h2>
    </div>
  );
};

export default DeliveryAddressDisplay;
 

**index.js**

 import * as React from "react";
import { render } from "react-dom";

import { AddressType, DeliveryAddress } from "./types";

import DeliveryAddressDisplay from "./DeliveryAddressDisplay";

// my api response for example
const johnsAddress: DeliveryAddress = {
  type: AddressType.postal,
  street: "John's street",
  streetNumber: "17"
};

const rootElement = document.getElementById("root");
render(<DeliveryAddressDisplay deliveryAddress={johnsAddress} />, rootElement);
 

С помощью этой реализации Typescript жалуется, когда я пытаюсь выполнить условный рендеринг в моем JSX для типов street , и streetNumber это не существует в PackstationAddress типе, даже если я пытаюсь отобразить PostalAddress

У кого-нибудь есть объяснение такого поведения?

Не совсем уверен в ошибке, которую вы получаете, но если вам нравится это:

 {props.deliveryAddress.type === AddressType.postal amp;amp; <span>Street: {props.deliveryAddress.street}</span>}
 

затем ошибка исчезает.