Arrays 反应this.setState不更新数组状态变量
关于涉及数组的react state update，有很多帖子，但似乎没有一个能解决我的问题 我正在使用FullCalendar.io组件，它从父组件接受事件数组作为道具，并填充日历单元格。我试图基于nextrops.cal_events设置状态“cal_events_state”，但由于某些原因，cal_event_state被设置为[]（显然初始状态值被覆盖） 我错过了什么Arrays 反应this.setState不更新数组状态变量,arrays,reactjs,Arrays,Reactjs,关于涉及数组的react state update，有很多帖子，但似乎没有一个能解决我的问题 我正在使用FullCalendar.io组件，它从父组件接受事件数组作为道具，并填充日历单元格。我试图基于nextrops.cal_events设置状态“cal_events_state”，但由于某些原因，cal_event_state被设置为[]（显然初始状态值被覆盖） 我错过了什么 import React from 'react'; import ReactDOM from 'react-dom'
import React from 'react';
import ReactDOM from 'react-dom';
var $ = require ('jquery')
var Calendar = React.createClass ({
render: function() {
return <div id="calendar"></div>;
},
getInitialState: function() {
return {
cal_events_state: [{"due": "201505", "title": "Production"}]
, test_state: 11
}
},
componentDidMount: function() {
var self = this;
const var_cal_events = this.props.cal_events; //This prop is blank at this point because ajax hasn't returned an array yet.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: var_cal_events;
})
},
componentWillReceiveProps: function(nextProps) {
var self = this;
var var_cal_events = nextProps.cal_events; // after receiving the ajax fetch payload, this has some event tasks.
this.setState({
cal_events_state: var_cal_events, // This doesn't update state with the newly received payload
test_state: 22 // This updates state
})
$('#calendar').fullCalendar({
events: var_cal_events
})
$('#calendar').fullCalendar('refetchEvents');
},
});
从“React”导入React；
从“react dom”导入react dom；
var$=require（'jquery'）
var Calendar=React.createClass({
render:function（）{
返回；
},
getInitialState:函数（）{
返回{
cal_事件_状态：[{“到期”：“201505”，“标题”：“生产”}]
，测试状态：11
}
},
componentDidMount:function（）{
var self=这个；
const var_cal_events=this.props.cal_events；//此时该属性为空，因为ajax尚未返回数组。
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
事件：var_cal_事件；
})
},
组件将接收道具：函数（下一步）{
var self=这个；
var var_cal_events=nextrops.cal_events；//在接收到ajax获取负载后，它有一些事件任务。
这是我的国家({
cal\u events\u state:var\u cal\u events，//这不会使用新接收的负载更新状态
测试状态：22//此更新状态
})
$（“#日历”）.fullCalendar({
事件：var\u cal\u事件
})
$（“#日历”）.fullCalendar（'refetchEvents'）；
},
});