时间戳

首页 > 解决方案 > 在 React 中不使用条件渲染时无法读取属性“地图”

javascript - 在 React 中不使用条件渲染时无法读取属性“地图”

问题描述

我试图渲染这段代码，.map()但日期时出现错误。（第 50 行）：

无法读取未定义的属性“地图”

在我使用条件渲染后{dates && dates.map((item) => <DateItem item={item} />)} ，渲染成功。
我不明白的是为什么我应该使用日期。
当我只渲染 line47 和 line48 时，我不需要使用条件渲染。
是渲染速度的问题吗？
如果我使用条件渲染，日期状态何时生成？

import React, { useState, useEffect } from "react";

const DateItem = ({ item }) => {
  return (
    <div>
      <div>{item.day}</div>
      <div>{item.date}</div>
    </div>
  );
};

const Dates = () => {
  const [date, setDate] = useState();
  const [day, setDay] = useState();
  const [dates, setDates] = useState();

  const getDateArr = () => {
    let arr = [];
    var weekday = new Array(7);
    weekday[0] = "sunday";
    weekday[1] = "monday";
    weekday[2] = "tuesday";
    weekday[3] = "wednesday";
    weekday[4] = "thursday";
    weekday[5] = "friday";
    weekday[6] = "saturday";
    for (let i = 0; i < 31; i++) {
      let d = new Date();
      d.setDate(d.getDate() - i);
      let date = d.getDate();
      let day = weekday[d.getDay()];
      arr.push({ day, date });
    }
    // console.log(arr);
    return arr;
  };
  useEffect(() => {
    setDate(new Date().getFullYear());
    setDay(new Date().getMonth());
    setDates(getDateArr());
  }, []);

  return (
    <>
      <div className="dateSection">
        <div className="head">날짜</div>
        <div className="year">{date}</div>  // line47
        <div className="month">{day}</div>
        <div className="dates">
          {dates.map((item) => (        // <=error line50
            <DateItem item={item} />
          ))}
        </div>
      </div>
    </>
  );
};

export default Dates;

标签： javascriptreactjs

解决方案

问题是.map()只能在数组上调用。也是异步setDates发生的，这就是为什么您在组件中的第一次渲染中具有价值。您可以设置默认的空数组值。或者您可以测试它是否具有 then或with以外的值。undefineddatesdatesuseState([])datesnullundefined&&

尝试以下操作：

const [dates, setDates] = useState([]);

或检查nullorundefined值：

{dates && dates.map((item) => (
   <DateItem item={item} />
))}

我希望这有帮助！

推荐阅读