如何在具有数组setState的渲染器中使用函数

时间:2019-02-08 11:18:52

标签: reactjs

我如何连续显示带有星期名称的当前星期日期,以及如何使用导航器显示月份的前几周和后几周

这是我显示日历的星期几,我要用一个星期的数组,我想通过状态在另一个函数中使用这个数组,但是这样,反应给我显示了无限循环的红旗,我如何使用它? 请帮我。预先感谢...

renderCells() {
  const { currentMonth, selectedDate } = this.state;
  const weekStart = dateFns.startOfWeek(currentMonth);
  const weekEnd = dateFns.endOfWeek(weekStart);
  const dateFormat = "DD";
  const rows = [];
  let days = [];
  let day = weekStart;
  let formattedDate = "";
  let dates = [];
  while (day <= weekEnd) {
    for (let i = 0; i < 7; i++) {
      formattedDate = dateFns.format(day, dateFormat);
      const date = moment(day, "mm-dd-yyyy").format("YYYY-MM-DD");

      dates.push(date);
      days.push(
        <div
          className={`col cell ${
            !dateFns.isSameMonth(day, weekStart)
              ? "disabled"
              : dateFns.isSameDay(day, selectedDate)
              ? "selected"
              : ""
          }`}
        >
          <span className="number">{formattedDate}</span>
          <span className="bg">{formattedDate}</span>
        </div>
      );

      day = dateFns.addDays(day, 1);
    }
    rows.push(
      <div className="row" key={day}>
        {days}
      </div>
    );
  }

  {
    this.setState({ dates: dates });
  }

  return <div className="body">{rows}</div>, dates;
}

render() {
  return {this.renderCells()};
}

在此函数中,我正在使用数组状态

onChange = e => {
  this.setState({ meetingId: e.target.value });
  this.availableTime(e.target.value);
  console.log("meeting", e.target.value, this.state.dates);
};

0 个答案:

没有答案