映射数组时反应渲染错误的值答案

【问题标题】：React rendering wrong value when mapping over an array映射数组时反应渲染错误的值
【发布时间】：2020-12-09 01:33:42
【问题描述】：

我遇到了一个非常奇怪的问题，在互联网上找不到任何描述相同问题的人。如果在某个地方发布了相同的问题，对于重复的问题，我深表歉意。

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

  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，因为会话已经发生。我遇到的错误是，当 Session 2 渲染时，它使用来自 Session 1 的链接进行渲染。没有其他属性（例如 sessionName、description、date）被混淆，只有registrationLink。这个错误最好的部分是什么？我无法在开发中复制它。

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

接下来我认为它可能与缓存有关，因此我们将Cache-control 更改为no-cache。这似乎解决了当时的问题......但我现在再次收到关于混淆注册链接的报告。

所以我想看看是否有人遇到过类似的问题，或者是否有人对可能发生的事情有任何见解。谢谢大家。

【问题讨论】：

尝试在地图中使用 Promise 或 async/await。在您的情况下，upcomingSessions condition 检查应该等待 upcomingSessions filter 完成。
你确定吗？我发现其他来源说 Array.prototype.filter() 是同步的。我当然愿意尝试，但正如我在描述中提到的那样——我无法在开发中复制这个错误——所以我必须实时推送更改
从过去的经验来看，当 JS 代码在 prod 和 dev 上的行为不同时，通常是在应用程序捆绑期间完成的缩小。尝试部署一个没有缩小的版本来验证是否是这种情况。

标签： javascript arrays reactjs jsx

【解决方案1】：

因此，从Shankar Ganesh Jayaraman 的评论中，我认为正在发生的过滤可能与错误有关。

我将upcomingSessions 移动到Schedule 的本地状态，并在组件加载时设置upcomingSessions。它已经解决了这个问题，但老实说我无法说出原因。

【讨论】：