Javascript 无缘无故地神奇地改变反应状态

Javascript 无缘无故地神奇地改变反应状态,javascript,reactjs,api,momentjs,fetch-api,Javascript,Reactjs,Api,Momentjs,Fetch Api,我正在为日历应用程序使用React。我从API中获取特定日期的数据,以便从数据库中一次仅获取1周的数据 当我像这样从API获取时: export default class CalendarApp extends React.Component { state = { months: moment.months(), day: moment.weekdays(), daysPerMonth: moment().daysInMonth(), startDate:

我正在为日历应用程序使用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)。 结果,我的日历应用程序坏了,它总是比我需要的时间提前一周,而不是当前一周。
例如,如果我的日历显示2018年5月20日至2018年5月26日之间的天数,我将从API获取2018年5月13日至2018年5月20日之间天数的数据。

您直接改变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}));
    });
  };

我从未使用过moment,但我在文档中发现:

注:应注意力矩是可变的。调用任何操纵方法都会改变原始时刻

所以当你打电话的时候

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

它会更改您的开始日期并返回


希望它能帮助您。

它允许我克隆startDate,但当我在endDate变量中使用startDate.clone()时,它会抛出一个错误:“startDate.clone不是一个函数”。请从状态使用startDate,因为clone在unix值上不起作用是的,谢谢我已经这么做了。我现在开始工作了,谢谢!很高兴能帮忙