三元运算符不 return 反应组件

Question

我不太确定这个问题，所以我会解释得更广泛一些。

我正在尝试制作 React 计划组件，如下图所示：

我遇到的问题是我得到的是没有任何元素的空 flex 组件。

所以我有一个包含数据的 JSON 文件。它看起来像这样：

export const eventHours = [
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,]

export const scheduleData = [
{
    weekDay: {
        title: 'Day 1',
        day: 'Monday',
        date: 'NOvemb 30th',
    },
    events: [
        {
            icon: '/images/icons/talk.png',
            type: 'Lecture',
            title: 'adsasd',
            startTime: 11,
            endTime: 14,
        },
    ],
},
{
    weekDay: {
        title: 'Day 2',
        day: 'Monday',
        date: 'NOvemb 30th',
    },
    events: [
        {
            
            icon: '/images/icons/talk.png',
            type: 'Lecture',
            title: 'adsasd',
            startTime: 11,
            endTime: 14,
        },
        {
            
            icon: '/images/icons/talk.png',
            type: 'Lecture',
            title: 'adsasd',
            startTime: 16,
            endTime: 18,
        },
    ],
},]

所以我的想法是映射几天，每天渲染 Flex 组件（我使用的是 ChakraUI），然后在该组件内映射当天的所有事件。对于每个事件，我都在几个小时内进行映射。如果小时小于事件开始时间，我 return 为真，如果它相等，则 return 为真，我正在制作一个布尔数组。

最后，我通过数组映射到真正的 return 空白框组件和错误的 return 实际单元格组件。

这里是代码，方便理解

事件组件：我从数据

中得到了其中两个渲染 2 天

const Events = (props: Props) => {
return (
    <>
         <Box w='1000px' h='510px'>
        {scheduleData.map((day) => <EventFlex events={day.events} />)}
     </Box> 
    </>
)}

这里的 eventFlex 组件正在发生所有逻辑

我没有得到任何渲染，父 div 是空的。

interface Props {
    events: Event[]
}
type Event = {
    icon: string
    type: string
    title: string
    startTime: number
    endTime: number
}

const EventFlex = ({ events }: Props) => {

    const [emptyEventCells, setEmptyEventCells] = useState<boolean[]>([])
    const [myEvents, setEvents] = useState<Event[]>([])

    useEffect(() => {
        setEvents(events)
        generateEmptyEventCells()

    }, [])
    const generateEmptyEventCells = () => {
        let tempFlexItems: boolean[] = []

        myEvents.map(event => {
            eventHours.map(hour => {

                if (hour < event.startTime) {
                    tempFlexItems.push(true)
                }
                if (hour === event.startTime) {
                    tempFlexItems.push(false)
                }
            })
        })
        setEmptyEventCells(tempFlexItems)
    }
    const calculateEventLength = (startTime: number, endTime: number) => {
        return endTime - startTime;
    };

    return (<Flex h='102px'>
        {emptyEventCells.map((isEmpty: boolean, index) => (
            <React.Fragment>
                {isEmpty ? <Box w="83px"></Box> : <EventCell
                    size={`${calculateEventLength(myEvents[index].startTime, myEvents[index].endTime) * 83}`}
                    icon={myEvents[index].icon}
                    type={myEvents[index].type}
                    title={myEvents[index].title}
                    time={`${myEvents[index].startTime}h-${myEvents[index].endTime}h`}
                />}
            </React.Fragment>
        ))}
    </Flex>);

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

三元运算符按预期工作，但我发现您的代码有 2 个错误和 1 个问题。

useEffect 的错误用法。由于 setEvents 是异步的，因此在 setEvents(events) 之后调用 generateEmptyEventCells 不会给出预期的结果。将它分成 2 个 useEffects
emptyEventCells 的长度与 myEvents 不同，因此，在 EventFlex 组件中，您不应将 emptyEventCells 中的索引用作 myEvents[index] .如果你想知道 event 与 isEmpty 值相关，最好另辟蹊径。
问题：如果从数组中渲染元素，比如使用 Array.map，您应该为元素提供 key 属性。

最终代码为

EventFlex 组件

interface Props {
  events: Event[];
}

type Event = {
  icon: string;
  type: string;
  title: string;
  startTime: number;
  endTime: number;
};

type CellInfo = {
  isEmpty: boolean;
  event: Event;
};

const EventFlex = ({ events }: Props) => {
  const [emptyEventCells, setEmptyEventCells] = useState<CellInfo[]>([]);
  const [myEvents, setEvents] = useState<Event[]>([]);

  useEffect(() => {
    setEvents(events);
  }, []);
  useEffect(() => {
    generateEmptyEventCells();
  }, [myEvents]);
  const generateEmptyEventCells = () => {
    let tempFlexItems: CellInfo[] = [];

    myEvents.forEach((event) => {
      // use forEach if not returning anything
      eventHours.forEach((hour) => {
        // use forEach if not returning anything
        if (hour < event.startTime) {
          tempFlexItems.push({ isEmpty: true, event });
        }
        if (hour === event.startTime) {
          tempFlexItems.push({ isEmpty: false, event });
        }
      });
    });
    setEmptyEventCells(tempFlexItems);
  };
  const calculateEventLength = (startTime: number, endTime: number) => {
    return endTime - startTime;
  };
  return (
    <Flex h="102px">
      {emptyEventCells.map(({ isEmpty, event }, index) => (
        <React.Fragment key={`${index}`}>
          {isEmpty ? (
            <Box w="83px"></Box>
          ) : (
            <EventCell
              size={`${
                calculateEventLength(event.startTime, event.endTime) * 83
              }`}
              icon={event.icon}
              type={event.type}
              title={event.title}
              time={`${event.startTime}h-${event.endTime}h`}
            />
          )}
        </React.Fragment>
      ))}
    </Flex>
  );
};

事件组件

const Events = (props: Props) => {
  return (
    <>
      <Box w="1000px" h="510px">
        {scheduleData.map((day, index) => (
          <EventFlex events={day.events} key={`${index}`} /> // use key
        ))}
      </Box>
    </>
  );
};

这是codesandbox演示：https://codesandbox.io/s/young-firefly-cxvbh?file=/src/App.tsx

三元运算符不 return 反应组件

Ternary operator doesn't return react component

ternary

flexbox

reactjs

EventFlex 组件

事件组件