三元运算符不返回反应组件

如何解决三元运算符不返回反应组件

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

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

我遇到的问题是我得到了空的 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',events: [
        {
            
            icon: '/images/icons/talk.png',{
            
            icon: '/images/icons/talk.png',startTime: 16,endTime: 18,]

所以我的想法是映射几天，每天渲染 Flex 组件（我使用 ChakraUI），然后在该组件内，映射当天的所有事件。对于每个事件，我都在映射几个小时。如果小时小于事件 startTime，我将返回 true，如果它相等，则返回 true，我正在制作一个布尔数组。

最后，我在真正的返回空框组件上映射该数组以生成空白空间，并在错误返回实际单元格组件上进行映射。

下面是代码，方便理解

事件组件：我正在从数据中渲染其中两个 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>

解决方法

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

错误使用 useEffect。由于 setEvents 是异步的，因此在 generateEmptyEventCells 之后调用 setEvents(events) 不会给出预期的结果。将其分解为 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>
    </>
  );
};

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