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

Question

我正在制作 React 应用程序，我有这样的问题：例如，我有一个数组，它看起来像这样：containerconst 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

Answer 1

执行此操作的一种方法是在每个对象中添加 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>;

Answer 2

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

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()) })

})