为了账号安全,请及时绑定邮箱和手机立即绑定

如何为数组中的每个元素创建唯一的日期?

如何为数组中的每个元素创建唯一的日期?

郎朗坤 2022-09-23 21:31:42

我正在制作 React 应用程序,我有这样的问题:


例如,我有一个数组,它看起来像这样:container


const container = [

 {item: '1'},

 {item: '2'},

 {item: '3'},

 {item: '4'}

]

然后我想在html 4列中制作,每个列都有一个值。所以我正在使用这个:


<div>

 {container.map(t =>

  <div className='box'>{t.item}</div>

 )}

</div>

因此,它将生成具有不同值的 4:div1/2/3/4


现在我的问题在这里:如何为每个日期(从toda到...)制作自己的日期?box


第一项 = 6 月 8 日,星期一

第二个项目 = 6月9日,星期二

等。


我做了这样的事情,但它只显示当前日期,bu我需要显示从今天开始的接下来几天:8,9,10,11等(最后一个日期没关系,它可以是6月25日)



let x = new Date();


let fullDate = x.toLocaleString('en-gb', { day:'numeric' , weekday: 'long', month: 'long' });

附言:当我使用它时,它会在每列中显示所有日期。for


查看完整描述

2 回答

?
慕妹3146593

TA贡献1487条经验 获得超9个赞

执行此操作的一种方法是在每个对象中添加 date 属性。container


你在你的问题中没有提到它,但通过这个例子,我理解你要求日期每天增加。为此,您可以将N天添加到当前日期,请查看以下示例,addDays函数将每个参数花费的天数添加到今天


const container = [

  {

    item: 1,

    date: new Date(),

  },

  {

    item: 2,

    date: addDays(1),

  },

  {

    item: 3,

    date: addDays(2),

  },

  {

    item: 4,

    date: addDays(3),

  },

];


function addDays(day) {

  const date = new Date();


  date.setDate(date.getDate() + day);


  return date;

}


console.log(container);


更新 0


// container state after fetching data

const container = [

  {

    item: 1,

  },

  {

    item: 2,

  },

  {

    item: 3,

  },

  {

    item: 4,

  },

];


// container state after transform

const list = container.map((entry) => ({

  ...entry,

  date: addDays(entry.item),

}));


function addDays(day) {

  const date = new Date();


  date.setDate(date.getDate() + day);


  return date;

}


console.log(list);

更新 1


为了格式化日期,您可以尝试类似这样的东西


function format(date) {

  const month = date.getMonth()

  const day = date.getDate()


  return `${month}-${day}`;

}

并以这种方式调用格式方法


function addDays(day) {

  const date = new Date();


  date.setDate(date.getDate() + day);


  return format(date);

}

您可以在这个超级受欢迎的问题中阅读有关日期格式的信息


然后在 react 容器列表中,它变得简单


<div>

  {container.map((t) => (

    <div className="box">

      <span>{t.item}</span>

      <span>{t.date}</span>

    </div>

  ))}

</div>;


查看完整回答
反对 回复 3天前
?
RISEBY

TA贡献1535条经验 获得超5个赞

您可以使用此函数生成随机日期


function randomDate(start, end) {

    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));

}

//result

const myRandomDate = randomDate(new Date(2020, 6, 8), new Date())

console.log(myRandomeDate)

将日期添加到对象列表中


const newContainer =[] 

container.forEach(c=>{

  newContainer.push( { item:c.item , date:randomDate(new Date(2020, 6, 8), new Date()) })

})


查看完整回答
反对 回复 3天前
  • 2 回答
  • 0 关注
  • 9 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信