reactjs - 使用 react-day-picker 禁用数组中的天数

Question

我正在使用 react-day-picker 并尝试从 axios 函数中禁用日期数组，如下所示：

this.state = {
  dateDisabled: [],
}

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

}

当我 console.log 时，我的状态 dateDisabled 也变成了这样：

(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为状态，然后将其提供给 React Day Picker。