TypeError：在React

如何解决TypeError：在React

我是新手，我想为即将举行的贸易展览显示一个日期。每个节目都有一个对象数组，并且正在尝试遍历该数组以比较日期以解密要显示的日期。

示例：如果在8月20日，8月30日和10月4日有一场演出，我想在即将到来的当天显示30号即将到来的节目，然后显示10月4日直到该节目，依此类推...

尝试一个：

    const correctDate = this.props.myEvents.map((myEvent,i) => {
            // debugger
            if (myEvent.eventDate == this.state.todaysDate) { console.log("I work")
                return (
                <div>
                    <h3>{myEvent.eventDate}</h3>
                    <h3>{myEvent.eventStart} - {myEvent.eventEnd}</h3>
                    <h2>{myEvent.eventName}</h2>
                </div> )
            } else if (this.state.todaysDate > myEvent.eventDate && myEvent.eventDate < this.props.myEvents[i + 1].eventDate) { console.log("I work")
                return (
                    <div>
                        <h3>{myEvent.eventDate}</h3>
                        <h3>{myEvent.eventStart} - {myEvent.eventEnd}</h3>
                        <h2>{myEvent.eventName}</h2>
                    </div> )
            } else {
                console.log("idk what's happening but i ran")
            }
        })

    return(
        <div>
            {correctDate}
        </div>
    )
    

这将返回以下错误： TypeError: Cannot read property 'eventDate' of undefined 我虽然是由于this.props.myEvents[i + 1].eventDate

尝试两个：

  const correctDate = [] 

  for (let i = 0; i < this.props.myEvents.length; i++) {
         for(let k = 0; k < this.props.myEvents.length; i++) {
             if (this.props.myEvents[i].eventDate == this.state.todaysDate) {
                 correctDate.push(
                     <div>
                         <h3>{this.props.myEvents[i].eventDate}</h3>
                         <h3>{this.props.myEvents[i].eventStart} - {this.props.myEvent[i].eventEnd}</h3>
                         <h2>{this.props.myEvents[i].eventName}</h2>
                     </div>)
             } else if (this.state.todaysDate > this.props.myEvents[i].eventDate && this.props.myEvents[i].eventDate < this.props.myEvents[k].eventDate) {
                 correctDate.push(
                     <div>
                         <h3>{this.props.myEvents[i].eventDate}</h3>
                         <h3>{this.props.myEvents[i].eventStart} - {this.props.myEvent[i].eventEnd}</h3>
                         <h2>{this.props.myEvents[i].eventName}</h2>
                     </div>
                 )
             } else {
                 console.log("I didn't work at all")
             }
         }
     }

这给了我以下错误： TypeError: Cannot read property '0' of undefined

非常感谢您的帮助！

解决方法

据我了解，您只想呈现今天或将来发生的项目？您可以按日期对myEvents进行排序，然后过滤以删除过去的日期吗？每当我处理日期时，我都会使用实用程序库，因此moment对于此类事情非常有用

import React from "react";
import moment from "moment";

const Events = () => {
  const myEvents = [
    {
      eventDate: new Date("07/01/2020"),title: "July Jam"
    },{
      eventDate: new Date("09/01/2020"),title: "September to Remember"
    },{
      eventDate: new Date("06/01/2020"),title: "June Gloom"
    },{
      eventDate: new Date("08/26/2020"),title: "August Ice Cream Day 1"
    },{
      eventDate: new Date("08/27/2020"),title: "August Ice Cream Day 2"
    }
  ];

  let sorted = myEvents
    .sort((a,b) => (a.eventDate > b.eventDate ? 1 : -1))
    .filter((event) =>
      moment(event.eventDate).isSameOrAfter(new Date().toLocaleDateString())
    );

  return (
    <ul>
      {sorted.map(({ eventDate,title }) => (
        <li key={title}>
          {eventDate.toLocaleDateString()} - {title}
        </li>
      ))}
    </ul>
  );
};

export default Events;

现在sorted将是从今天开始的所有事件。因此，您可以遍历这些内容并呈现如下所示的<ul />

<ul>
  <li>8/26/2020 - August Ice Cream Day 1</li>
  <li>8/27/2020 - August Ice Cream Day 2</li>
  <li>9/1/2020 - September to Remember</li>
</ul>

根据评论更新 如果只想显示下一个事件，则可以获取数组中的第一项。像这样的作品。

let [nextEvent,...rest] = myEvents
    .sort((a,b) => (a.eventDate > b.eventDate ? 1 : -1))
    .filter((event) =>
      moment(event.eventDate).isSameOrAfter(new Date().toLocaleDateString())
    );

  return (
    Boolean(nextEvent) && (
      <div>
        Next Event: {nextEvent.title} on{" "}
        {nextEvent.eventDate.toLocaleDateString()}
      </div>
    )
  );