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

Question

我试图渲染这段代码，.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;

Answer 1

问题是.map()只能在数组上调用。也是异步setDates发生的，这就是为什么您在组件中的第一次渲染中具有价值。您可以设置默认的空数组值。或者您可以测试它是否具有 then或with以外的值。undefineddatesdatesuseState([])datesnullundefined&&尝试以下操作：const [dates, setDates] = useState([]);或检查nullorundefined值：{dates && dates.map((item) => (&nbsp; &nbsp;<DateItem item={item} />))}我希望这有帮助！

Answer 2

发生这种情况dates的设置为在开始时没有任何内容作为默认值undefined传递。useState()您可以通过将空数组[]作为初始值传递来轻松解决此问题，例如：const&nbsp;[dates,&nbsp;setDates]&nbsp;=&nbsp;useState([]);