Реагировать состояние волшебным образом меняется без причины

Question

Я использую React для календарного приложения. Я получаю данные из API за определенные даты, чтобы получать данные только за 1 неделю из базы данных.

Когда я получаю из API, как это:

export default class CalendarApp extends React.Component {
  state = {
    months: moment.months(),
    day: moment.weekdays(),
    daysPerMonth: moment().daysInMonth(),
    startDate: moment(),
    date: moment().year(2017).month(0).date(1).format('l'),
    firstWeekDay: 0,
    data: [],
    minDate: moment().year(2017).month(0).date(1),
    maxDate: moment().year(2018).month(11).date(31)
  };
  componentDidMount() {


    const startDate = this.state.startDate.day(this.state.firstWeekDay).unix();
    const endDate = this.state.startDate.day(this.state.firstWeekDay).add(1, 'week').unix();
    console.log(`I am fetching data between ${moment.unix(startDate).format("MM/DD/YYYY")} and ${moment.unix(endDate).format("MM/DD/YYYY")}`);

    // console.log(this.state.startDate.day(this.state.firstWeekDay));

    axios.get(`http://localhost/api/date?startDate=${startDate}&endDate=${endDate}`).then((response) => {
      this.setState(() => ({ data: response.data}));
    });
  };

Затем startDate волшебным образом изменяется (он добавляет 1 неделю, как у меня в переменной endDate, хотя я никогда не использую setState для этого). В результате мое приложение календаря не работает, и оно всегда загружается за неделю до того, как мне нужно, а не за текущую неделю. Например, если в моем календаре отображаются дни между 20.05.2008 и 26.05.2017, я получаю данные из API за дни между 13.05.2008 и 20.05.2008.

Answer 1

Вы напрямую изменяете состояние в componentDidMount, и, следовательно, оно обновляется. использовать .clone() метод на момент объекта, чтобы клонировать его, прежде чем вносить какие-либо изменения

componentDidMount() {
    let startDate = 
this.state.startDate.clone()
    startDate = startDate.day(this.state.firstWeekDay).unix();
    const endDate = this.state.startDate.clone().day(this.state.firstWeekDay).add(1, 'week').unix();
    console.log(`I am fetching data between ${moment.unix(startDate).format("MM/DD/YYYY")} and ${moment.unix(endDate).format("MM/DD/YYYY")}`);

    // console.log(this.state.startDate.day(this.state.firstWeekDay));

    axios.get(`http://localhost/api/date?startDate=${startDate}&endDate=${endDate}`).then((response) => {
      this.setState(() => ({ data: response.data}));
    });
  };

Answer 2

Я никогда не использовал момент, но я нашел это в документации:

Примечание: следует отметить, что моменты изменчивы. Вызов любого из методов манипуляции изменит исходный момент.

https://momentjs.com/docs/

поэтому, когда вы звоните

this.state.startDate.day(this.state.firstWeekDay).add(1, 'week').unix();

Он меняет дату начала и возвращает ее.

Надеюсь, это поможет вам.