Question

我遇到了一个非常奇怪的问题，无法在互联网上找到任何描述相同问题的人。如果那里有相同的问题，我为重复的问题表示歉意。

我有一个由对象数组表示的“时间表”。数组中的每个对象代表一个“周”，每个周包含一个“会话”数组。

  const schedule = [
    {
      title: "Week 16",
      sessions: [
        {
          sessionName: "Session 1: First Session",
          date: "8/15/2020",
          registrationLink: "Link",
          description: "Description for session 1"
        },
        {
          sessionName: "Session 2: Second Session",
          date: "8/28/2020",
          registrationLink: "AnotherLink",
          description: "Description for session 2"
        }
      ]
    },
  ];

我是时间表和每周渲染的映射。在每个星期中，我都会抓取这些会话并过滤掉使用momentjs已经发生的会话。然后，我映射即将到来的会话（即尚未发生的会话）并渲染每个会话。每个会话都包含一个注册链接，允许用户注册该会话。

const Schedule = ({ schedule }) => {
  return (
    <React.Fragment>
      {schedule.map((week, weekIndex) => {
        const upcomingSessions = week.sessions.filter(
          ({ date }) => moment(date).diff(moment(today)) >= 0
        )
        if (upcomingSessions.length !== 0) {
          return (
            <React.Fragment key={weekIndex}>
              {upcomingSessions.map((session, sessionIndex) => {
                return (
                  <Session
                    key={`upcoming-${weekIndex}-${sessionIndex}`}
                    session={session}
                  />
                )
              })}
            </React.Fragment>
          )
        }
        return "";
      })}
    </React.Fragment>
  )
}

在撰写本文时（2020年8月19日），在上面的示例中，不会呈现会话1，因为该会话已经发生。我遇到的错误是，在渲染会话2时，它将使用来自会话1的链接进行渲染。没有其他属性（例如sessionName，description，date）混合在一起，仅是registrationLink。关于此错误最好的部分是？我无法在开发中复制它。

起初，我认为这可能与我提供的key有关。通过在其中包含一部分注册链接，我使它们更加独特（上面的代码片段未显示）。

接下来，我认为它可能与缓存有关，因此我们将Cache-control更改为no-cache。当时似乎可以解决问题……但是我现在又收到有关混合注册链接的报告。

因此，我正在寻求是否有人遇到过类似的问题，或者是否有人对可能发生的情况有任何见解。谢谢大家。

Answer 1

因此，根据Shankar Ganesh Jayaraman的评论，我想到了可能发生的过滤与错误有关。

我将upcomingSessions移到了Schedule的本地状态，并在组件加载时设置了upcomingSessions。它已经解决了这个问题，但是老实说我不能说为什么。

在数组上进行映射时，反应渲染错误的值

1 个答案: