亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中不使用條件渲染時無法讀取屬性“地圖”

在 React 中不使用條件渲染時無法讀取屬性“地圖”

瀟湘沐 2022-06-16 14:36:44
我試圖渲染這段代碼,.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;
查看完整描述

2 回答

?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

問題是.map()只能在數組上調用。也是異步setDates發生的,這就是為什么您在組件中的第一次渲染中具有價值。您可以設置默認的空數組值?;蛘吣梢詼y試它是否具有 then或with以外的值。undefineddatesdatesuseState([])datesnullundefined&&


嘗試以下操作:


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

或檢查nullorundefined值:


{dates && dates.map((item) => (

   <DateItem item={item} />

))}

我希望這有幫助!


查看完整回答
反對 回復 2022-06-16
?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

發生這種情況dates的設置為在開始時沒有任何內容作為默認值undefined傳遞。useState()您可以通過將空數組[]作為初始值傳遞來輕松解決此問題,例如:

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


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號