使用react中的react日期选择器禁用数组中的日期

Question

我使用的是react day picker，我试图禁用axios函数中的日期数组，如下所示：

this.state = {
  dateDisabled: [],
}
componentDidMount() {
axios.get(URL_GET_DATE)
  .then(response => {
    const date = response.data;
    this.setState({
      dateDisabled: date
    })
  })

}

当我控制台时，我的状态dateDisabled也变成了这样。log:

(2) [{…}, {…}]
`0: date_arrivee: "2020-04-07T21:00:00.000Z" date_depart: "2020-04-10T21:00:00.000Z"
`1: date_arrivee: "2020-03-24T22:00:00.000Z"date_depart: "2020-03-30T21:00:00.000Z"

我希望得到与这里相同的结果->

disabledDays={[
    {
      after: new Date(2017, 3, 20),
      before: new Date(2017, 3, 25),
    },
  ]}
/>

将天数显示为禁用

我的约会怎么会变成前后道具？谢谢你，对我糟糕的英语感到抱歉

Answer 1

您可以简单地在数组上进行映射以实现以下结果：

const dates = [{
  date_arrivee: "2020-04-07T21:00:00.000Z",
  date_depart: "2020-04-10T21:00:00.000Z"
}, {
  date_arrivee: "2020-03-24T22:00:00.000Z",
  date_depart: "2020-03-30T21:00:00.000Z",
}];
const transformedDates = dates.map((date)=>{
  return {
    before: new Date(date.date_arrivee),
    after: new Date(date.date_depart),
  }
});
console.log(transformedDates);

您可以将transformedDates设置为state，然后将其提供给React Day Picker。