ReactJS 错误 TypeError：无法将 undefined 或 null 转换为对象

Question

The affected code is (Typescript errors in local) (componet is correct, the name is as that):

{template.elements.map((element: TemplateElementModel, i) => {
            const stand = roomStands?.find(
              (stand: ExhibitorModel) => stand.standNumber === `${i + 1}`
            );
            const componet = stand ? (
              <img
                src={stand?.logo}
                alt={`${stand?.name} logo`}
                className="w-24 object-contain"
              />
            ) : undefined;
            const handleClick = stand
              ? () => {
                  dispatch(setExhibitor(stand?.id));
                  dispatch(pushScreen(EventDetailScreen.stand));
                }
              : undefined;

That's when the code has an error but is just the new registers. When all is ok it shows the view but if has that error the view was a blank page.

I've tried a lot of solutions but i cannot detect what is the problem.

The complete code is:

import React, { useEffect, useState } from "react";
import {
  TemplateElementModel,
  TemplateModel,
} from "../../template/template.model";
import {
  currentEventIdSelector,
  roomIdSelector as eventRoomSelector,
  popScreen,
  pushScreen,
  setExhibitor,
  setRoom,
} from "../event.slice";
import { useDispatch, useSelector } from "react-redux";

import { Collections } from "../../../config/app.collections";
import DeimosModal from "../../../lib/deimos-ui/components/deimos-modal/DeimosModal";
import { EventDetailScreen } from "../enums/event-detail-screen";
import { ExhibitorModel } from "../../exhibitor/exhibitor.model";
import { RoomModel } from "../../room/room.model";
import { RootState } from "../../../app.store";
import TemplateMarker from "../../template/components/TemplateMarker";
import { TemplateTypes } from "../../template/template-types.enum";
import { useFirestoreConnect } from "react-redux-firebase";

interface EventExhibitionsPageProps {}

const EventExhibitionsPage: React.FC<EventExhibitionsPageProps> = () => {
  const dispatch = useDispatch();
  const [template, setTemplate] = useState<TemplateModel>();
  const [roomStands, setRoomStands] = useState<ExhibitorModel[]>();
  const [showRoomsModal, setShowRoomsModal] = useState(true);
  const currentRoom = useSelector(eventRoomSelector);
  const eventId = useSelector(currentEventIdSelector);
  const rooms = useSelector(
    (state: RootState) => state.firestore.data[Collections.ROOM]
  );
  const templates = useSelector(
    (state: RootState) => state.firestore.data[Collections.TEMPLATE]
  );
  const stands = useSelector(
    (state: RootState) => state.firestore.data[Collections.EXHIBITOR]
  );

  useFirestoreConnect([
    {
      collection: Collections.ROOM,
      where: ["event", "==", eventId],
    },
    {
      collection: Collections.TEMPLATE,
      where: ["type", "==", TemplateTypes.Room],
    },
    {
      collection: Collections.EXHIBITOR,
      where: ["eventId", "==", eventId],
    },
  ]);

  useEffect(() => {
    if (!currentRoom) return;
    const template = templates[currentRoom?.template];
    if (template) setTemplate(template);
  }, [currentRoom, templates]);

  useEffect(() => {
    if (!currentRoom) return;
    const filteredStands = Object.values<ExhibitorModel>(stands).filter(
      (stand) => stand.room === currentRoom.id
    );
    setRoomStands(filteredStands);
  }, [currentRoom, stands]);

  return (
    <div className="h-full w-full relative bg-no-repeat bg-center text-center">
      <DeimosModal
        isOpen={showRoomsModal}
        hideCancelButton={!currentRoom}
        closeButtonText="Salir"
        cancelButtonText={`Seguir en ${currentRoom?.name}`}
        handleCancel={() => {
          setShowRoomsModal(false);
        }}
        handleClose={() => {
          dispatch(popScreen());
        }}
      >
        {!!rooms && (
          <div>
            <p className="font-bold">Selecciona una sala a la que entrar</p>
            {Object.values<RoomModel>(rooms).map((room) => {
              return (
                <div
                  className="flex flex-row w-full my-2 p-3 bg-gray-200 rounded cursor-pointer"
                  onClick={() => {
                    dispatch(setRoom(room));
                    setShowRoomsModal(false);
                  }}
                >
                  {room.name}
                </div>
              );
            })}
          </div>
        )}
      </DeimosModal>
      {currentRoom && template && (
        <div
          className="w-full h-full flex flex-row justify-center align-center"
          style={{
            backgroundImage: `url(${template.background})`,
            backgroundSize: "100% 100%",
          }}
        >
          {template.elements.map((element: TemplateElementModel, i) => {
            const stand = roomStands?.find(
              (stand: ExhibitorModel) => stand.standNumber === `${i + 1}`
            );
            const componet = stand ? (
              <img
                src={stand?.logo}
                alt={`${stand?.name} logo`}
                className="w-24 object-contain"
              />
            ) : undefined;
            const handleClick = stand
              ? () => {
                  dispatch(setExhibitor(stand?.id));
                  dispatch(pushScreen(EventDetailScreen.stand));
                }
              : undefined;
            return (
              <TemplateMarker
                // backgroundColor="#327ba8"
                width={element.w}
                height={element.h}
                x={element.x}
                y={element.y}
                key={element.id}
                skewX={element.skewX ?? template.skewX}
                skewY={element.skewY ?? template.skewY}
                labelComponent={componet}
                onClick={handleClick}
              />
            );
          })}
        </div>
      )}
    </div>
  );
};

export default EventExhibitionsPage;

Answer 1

TemplateMarker might not accept labelComponent to be undefined or null. You can add an extra check before sending TemplateMarker.

   return componet && (
      <TemplateMarker
        // backgroundColor="#327ba8"
        width={element.w}
        height={element.h}
        x={element.x}
        y={element.y}
        key={element.id}
        skewX={element.skewX ?? template.skewX}
        skewY={element.skewY ?? template.skewY}
        labelComponent={componet}
        onClick={handleClick}
      />
    );