使用 react-day-picker 在 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
    })
  })

}

当我 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),
    },
  ]}
/>

Display days as disabled

我的日期怎么会变成道具前后？谢谢你，对不起我的英语不好

Answer 1

您可以简单地 map 遍历数组以获得此结果：

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。

使用 react-day-picker 在 react 中禁用数组中的日期

Disable days from array with react-day-picker in react

reactjs

react-day-picker