在 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) => (

   <DateItem item={item} />

))}

我希望这有帮助！

Answer 2

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

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