如果两个数组匹配索引并且也匹配名称，则仅将类应用于元素

Question

我有一组可能的时隙通过映射呈现为 p 标签

{times.map((time, i) => (
    <p
      onClick={() => chooseTime(time, name)}
      className={`tc pa2 dib pointer ${colorClass(i)}`}
    >
      {time. dateUTCString}
    </p>
))}

时间段如下所示：

   "times": [
      {
        "timestamp": 1474607824073,
        "dateUTCString": "Sat Sep 03 2016 19:01:09 GMT+0000 (UTC)",
      },
      {
        "timestamp": 1389120349942,
        "dateUTCString": "Mon Aug 19 2019 05:43:14 GMT+0000 (UTC)",
      },
    etc...

我还有一个状态，它是一个固定数组，包含公司名称或空值，当我单击时间段时，它会更新，如果我单击时间段 2，我在公司 2，它将该公司的名称添加到索引 2，因此它与时间段匹配，如下所示：

[
null,
company2,
null,
null,
etc...
]

timeslots 元素有一个类，该类是一个确定类值应该是什么的函数，并且对于该类函数，我将元素保存的索引传递给它，因为它通过映射到 timeslots 数组来呈现.

  const colorClass = (indexOfSelectedSlot) => {
    let color = 'black'
    selectedCompanies.forEach((companyName, id) => {
      if (indexOfSelectedSlot === id) {
      color = 'gray'
        if (name === companyName) {
          color = 'red'
        }
      }
    })
    return color
  }

这里是codesanbox中的完整代码：https://codesandbox.io/s/focused-hypatia-ew1vh?fontsize=14

所以我想要实现的是：

如果我点击 company1 上的第一个时间段，我希望第一个时间段为红色，而其他公司的第一个时间段为灰色（因为一个人不能同时在两个地方）

并将其余时间段保留为默认黑色。

但是现在，如果我按下一个时隙，它会变成红色，但所有其他时隙都会变成灰色。

知道如何解决这个问题吗？

这里是代码框：https://codesandbox.io/s/focused-hypatia-ew1vh?fontsize=14

Answer 1

您在 companyPanel.js 中有以下代码

  const colorClass = indexOfSelectedSlot => {
    let color = "black";
    selectedCompanies.forEach((companyName, id) => {
      if (indexOfSelectedSlot === id) {
        color = "gray";
        if (name === companyName) {
          color = "red";
        }
      }
    });
    return color;
  };

更改color = "gray";to color = "black";，点击后文字保持黑色！