Javascript 推送/更新处于React JS状态的阵列

我对React JS非常陌生，将项推送到作为组件状态一部分的数组时遇到问题

我打算在组件挂载时更新状态（allDays数组），以列出当前月份和接下来两个月的每天。我只是得到一个空数组。我检查了循环，输出了日期，只是没有被推送到数组中

我目前的JavaScript是：

class CalendarDisplay extends React.Component {

    constructor(props) {
        super(props);
        this.state = { allDays: [] };
    }

    findDays = () => {

        var self = this;

        var currentDate = new Date();
        var mFormat = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-01';

        var startBookingDate = moment(mFormat);
        var endBookingDate = moment().add(2, 'M').endOf('month');

        var currentDate = moment(startBookingDate);

        while (currentDate <= endBookingDate) {

            self.setState({
                allDays: self.state.allDays.concat(moment(currentDate).format('YYYY-MM-DD'))
            });

            currentDate = moment(currentDate).add(1, 'days');

        }

    }

    componentDidMount = () => {

        this.findDays();
        console.log(this.state.allDays);

    }

    render = () => {
        return (
            <div>Please See the Console Log</div>
        )
    }

}

ReactDOM.render(
  <CalendarDisplay />,
  document.getElementById('app')
);

类日历显示扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={allDays:[]}；
}
findDays=（）=>{
var self=这个；
var currentDate=新日期（）；
var mFormat=currentDate.getFullYear（）+'-'+（currentDate.getMonth（）+1）+'-01'；
var startBookingDate=力矩（mFormat）；
var endBookingDate=moment（）.add（2，'M'）.endOf（'month'）；
var currentDate=时刻（开始预订日期）；
while（当前日期）{
this.findDays（）；
console.log（this.state.allDays）；
}
渲染=（）=>{
返回(
请查看控制台日志
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

这是一个问题的答案

我一直在阅读关于堆栈溢出的其他答案，但它们似乎不适用于这个问题。我目前正在尝试使用concat技术，但没有成功

任何帮助都会很好。

改变

self.setState({
                allDays: self.state.allDays.concat(moment(currentDate).format('YYYY-MM-DD'))
            });

至（根据评论编辑）

您需要将值推送到数组中，而不是将其压缩

---

请参见

我非常确定您不能像那样更新状态。您应该完全构建结束数组，然后更新状态。这样做的另一个好处是，您将只更新状态一次（而不是30/31次）

findDays=（）=>{
var月=[]；
var self=这个；
var currentDate=新日期（）；
var mFormat=currentDate.getFullYear（）+'-'+（currentDate.getMonth（）+1）+'-01'；
var startBookingDate=力矩（mFormat）；
var endBookingDate=moment（）.add（2，'M'）.endOf（'month'）；
var currentDate=时刻（开始预订日期）；
虽然（currentDateperformance-wise），但多次更新状态并不是一个好模式。更不用说它会触发大量的渲染

我的建议是将所有值保留在一个临时变量中，然后只更新一次状态

let days = []
while (currentDate <= endBookingDate) {
   days = [...days, moment(currentDate).format('YYYY-MM-DD')]
   currentDate = moment(currentDate).add(1, 'days')
}

this.setState({ allDays: days })

let days=[]
虽然（currentDate感谢您的提示，我将对此进行一次尝试这是否真的有效？我想
数组。push
返回了数组的长度，并对数组进行了变异，而不是返回一个新的数组。@stinodes它确实有效，您可以在JSFIDDLE中测试它。问题是，即使删除
setState
，它也会有效，因为e只是对处于状态的数组进行变异，而不是实际设置状态。如果在其他任何地方执行此操作，它甚至不会触发重新渲染器（或者在数组的长度为
allDays
”值的情况下触发它）。Fiddle:。它只记录
push
的返回值（即长度），但它从不设置状态。
findDays = () => {
    var month = [];
    var self = this;

    var currentDate = new Date();
    var mFormat = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-01';

    var startBookingDate = moment(mFormat);
    var endBookingDate = moment().add(2, 'M').endOf('month');

    var currentDate = moment(startBookingDate);

    while (currentDate <= endBookingDate) {

        month.push(moment(currentDate).format('YYYY-MM-DD'));

        currentDate = moment(currentDate).add(1, 'days');

    }

    self.setState({ allDays: month );

}

let days = []
while (currentDate <= endBookingDate) {
   days = [...days, moment(currentDate).format('YYYY-MM-DD')]
   currentDate = moment(currentDate).add(1, 'days')
}

this.setState({ allDays: days })