Javascript api内容的标签日期

在React中，我试图将我的api内容添加到一系列选项卡中，因此您单击一个选项卡，它将显示api中与该日期匹配的任何列表

我的尝试，组件代码如下

import context from "./apiContext";

import styled from "styled-components";
const Tab = styled.button`
  font-size: 20px;
  padding: 10px 60px;
  cursor: pointer;
  opacity: 0.6;
  background: white;
  border: 0;
  outline: 0;
  ${({ active }) =>
    active &&
    `
    border-bottom: 2px solid black;
    opacity: 1;
  `}
`;
const ButtonGroup = styled.div`
  display: flex;
`;

const tabs = ["18-08-20", "19-08-20", "20-08-20"];

function Movies() {
  const { films } = useContext(context);

  console.log(films);
  const [active, setActive] = useState(tabs[0]);

  return (
    <>
      <div className="movies">
        <div className="title">
          <h1>
            Movies: <span />
            All Releases
          </h1>
          <div className="tab-menu">
            <ButtonGroup>
              {tabs.map((tab) => (
                <Tab
                  key={tab.label}
                  active={active === tab}
                  onClick={() => setActive(tab)}
                >
                  {tab.label}
                </Tab>
              ))}
            </ButtonGroup>
          </div>
        </div>
        <div className="content">
          {films
            .filter((item) => item.PreShowStartTime === Date.parse({ active }))
            .map((item, index) => (
              <div class="card" key={index}>
                <div class="title">
                  <span class="title">{item.Title}</span>{" "}
                  <span>
                    {new Date(item.PreShowStartTime).toLocaleDateString("en", {
                      day: "2-digit",
                      month: "short"
                    })}
                  </span>
                </div>
              </div>
            ))}
        </div>
      </div>
    </>
  );
}

export default Movies;

从“/apiContext”导入上下文；
从“样式化组件”导入样式化；
const Tab=styled.button`
字体大小：20px；
填充：10px 60px；
光标：指针；
不透明度：0.6；
背景：白色；
边界：0；
大纲：0；
${（{active}）=>
活跃的&&
`
底部边框：2件纯黑；
不透明度：1；
`}
`;
const ButtonGroup=styled.div`
显示器：flex；
`;
常量选项卡=[“18-08-20”、“19-08-20”、“20-08-20”]；
功能电影（）{
const{films}=useContext（上下文）；
控制台日志（电影）；
const[active，setActive]=useState（制表符[0]）；
返回(
电影：
所有版本
{tabs.map（（tab）=>(
设置活动（选项卡）}
>
{tab.label}
))}
{电影
.filter（（项）=>item.presshowstarttime===Date.parse（{active}））
.map（（项目、索引）=>(
{item.Title}{”“}
{新日期（item.presshowstarttime）.toLocaleDateString（“en”{
日期：“两位数”，
月份：“短”
})}
))}
);
}
导出默认电影；

要使用live API查看，请执行以下操作：

---

第24行是我的日期测试数组，它也应该显示为选项卡的标签。

您必须根据您在代码中的

选项卡中定义的常量格式化API返回的日期（反之亦然）。当前，您的API返回示例
2020-08-18T14:00:00
，但您的
选项卡具有格式
18-08-20

因此，在您的
过滤器
条件下，您可以使用以下内容：

new Date(item.PreShowStartTime).toJSON().slice(2, 10) === active

其中
active
是在选项卡上选择的活动日期


作为旁注，您还访问了
tab.label
以打印选项卡标签<代码>选项卡
不包含名为
标签
的属性