Javascript can';t读取属性';地图';null-redux列表的定义
在我的应用程序中,有一个动态的locationData json。根据作业id,存在不同长度的对象数组。现在,我有了一个动作创造者。在我的组件中,我将此locationData作为该动作创建者的参数传递。呈现列表时,我遇到此错误。我是redux新手,请帮我找出错误所在 到目前为止我已经试过了 操作代码Javascript can';t读取属性';地图';null-redux列表的定义,javascript,reactjs,react-redux,Javascript,Reactjs,React Redux,在我的应用程序中,有一个动态的locationData json。根据作业id,存在不同长度的对象数组。现在,我有了一个动作创造者。在我的组件中,我将此locationData作为该动作创建者的参数传递。呈现列表时,我遇到此错误。我是redux新手,请帮我找出错误所在 到目前为止我已经试过了 操作代码 export const initLocationData = conLocations =>({ type: INIT_CONFIG_LOCATION, conLocations
export const initLocationData = conLocations =>({
type: INIT_CONFIG_LOCATION,
conLocations
});
case 'INIT_CONFIG_LOCATION':
return{
...state,
conLocations: action.conLocations
}
减速器代码
export const initLocationData = conLocations =>({
type: INIT_CONFIG_LOCATION,
conLocations
});
case 'INIT_CONFIG_LOCATION':
return{
...state,
conLocations: action.conLocations
}
组件代码:
export class NewLocationPanel extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
configuredList: [],
chkitems: []
};
//this.configLocation = this.configLocation.bind(this);
this.togglePanel = this.togglePanel.bind(this);
this.handleClick = this.handleClick.bind(this);
this.allLocations = this.allLocations.bind(this);
this.clearall = this.clearall.bind(this);
this.getLocationData = this.getLocationData.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.removeConfigLocation = this.removeConfigLocation.bind(this);
this.removeLocationAll = this.removeLocationAll.bind(this);
this.handleChecklocation = this.handleChecklocation.bind(this);
this.handleCheckedAdded = this.handleCheckedAdded.bind(this);
this.handleCheckedRemove = this.handleCheckedRemove.bind(this);
this.handleActionButton = this.handleActionButton.bind(this);
}
componentDidMount() {
this.props.loadData();
if (this.props.locationData != null && this.props.locationData != undefined) {
this.props.initLocationData(this.props.locationData);
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.jobId != this.props.jobId || (JSON.stringify(nextProps.locationData) != JSON.stringify(this.props.locationData))) {
//this.configLocation(this.props.locationData);
this.props.initLocationData(this.props.locationData);
}
}
togglePanel(e) {
this.setState({ open: !this.state.open });
}
handleRemove(mruCode) {
this.props.removeLocation(mruCode)
}
handleClick(mruCode) {
this.props.addLocation(mruCode)
}
allLocations() {
this.props.addAllLocation()
}
clearall() {
this.props.removeAllLocation()
}
handleChecklocation(mruCode) {
this.props.checkboxState(mruCode);
}
handleCheckedAdded() {
this.props.checkedLocation()
}
//more not related codes
//other codes
render() {
const _labels = store.getLabels();
let collapsedToggle = this.props.open ? 'collapsed' : ''
return (
<div className="panel panel-default">
<div className="panel-heading" onClick={(e) => this.togglePanel(e)}>
<div className="row">
<div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
<span>{this.props.title}</span>
</div>
<div className="pull-right">
<span className="defaultHeaderTextColor">{this.props.conLocations.map((loc, index) => <span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}{index < this.props.conLocations.length - 1 ? ',\u00A0' : ''}</span>)}
<span onClick={(e) => this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
</span>
</div>
</div>
</div>
{this.state.open ? (
<div className="panel-body">
<div className="row grid-divider">
<div className="col-sm-6">
<div className="col-padding"><div className="pos-div"><h4>Locations List</h4><button className="submitSmallBtn1" onClick={() =>this.handleCheckedAdded()}>Add Checked</button><button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={() =>this.allLocations() }>Add Locations</button></div><hr />
{this.props.location.map((item, index) => (
<div key={index}><div><input type="checkbox" onClick={() => this.handleChecklocation(item.mruCode)} style={{ display: this.state.configuredList.find(item4 => item.mruCode === item4.mruCode) ? "none" : "block" }} /><label></label><span className="locationNameSpan">{item.mruCode} - {_labels[item.division]} - {item.country}</span>{!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode) && (<div className="pull-right jd"><button style={{ display: this.state.configuredList.find(item3 => item.mruCode === item3.mruCode) ? "none" : "block" }} className="call-to-action" onClick={() => this.handleClick(item.mruCode) }>Add Location</button></div>)}<hr /></div></div>))}
</div>
</div>
<div className="col-sm-6">
<div className="col-padding">
<div className="pos-div"><h4>Configured Location</h4><button className="submitSmallBtn2" onClick={this.handleActionButton}>Delete Checked</button><button className="allLargeBtn" onClick={() =>this.removeLocationAll()}>Remove Locations</button></div>
<div><table className="table configTableColor"><thead>{this.props.conLocations.map((locc, index) => <tr key={index}><th><input type="checkbox" onClick={() => this.handleCheckedRemove(locc.mruCode)} /><label></label></th><th className="configLocationInfo">{locc.mruCode} - {_labels[locc.division]} - {locc.country}</th><th className="text-right"><img alt="DeleteIcon" onClick={() =>this.removeConfigLocation(index) } className="deleteIconStyle" src="img/delete_large_active.png" /></th></tr>)}</thead></table></div>
</div>
</div>
</div>
</div>) : null}
</div>
);
}
}
function mapStateToProps(state) {
return {
location: state.locationRed.location,
conLocations: state.locationRed.conLocations,
isChecked: state.locationRed.isChecked
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({
loadData,
addLocation,
addAllLocation,
removeLocation,
removeAllLocation,
checkboxState,
checkedLocation,
initLocationData
}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(NewLocationPanel);
导出类NewLocationPanel扩展React.Component{
建造师(道具){
超级(道具);
此.state={
开:错,
配置列表:[],
chkitems:[]
};
//this.configLocation=this.configLocation.bind(this);
this.togglePanel=this.togglePanel.bind(this);
this.handleClick=this.handleClick.bind(this);
this.allLocations=this.allLocations.bind(this);
this.clearall=this.clearall.bind(this);
this.getLocationData=this.getLocationData.bind(this);
this.handleRemove=this.handleRemove.bind(this);
this.removeConfigLocation=this.removeConfigLocation.bind(this);
this.removelocational=this.removelocational.bind(this);
this.handleChecklocation=this.handleChecklocation.bind(this);
this.handleCheckedAdded=this.handleCheckedAdded.bind(this);
this.handleCheckedRemove=this.handleCheckedRemove.bind(this);
this.handleActionButton=this.handleActionButton.bind(this);
}
componentDidMount(){
this.props.loadData();
if(this.props.locationData!=null&&this.props.locationData!=未定义){
this.props.initLocationData(this.props.locationData);
}
}
组件将接收道具(下一步){
if(nextrops.jobId!=this.props.jobId | | |(JSON.stringify(nextrops.locationData)!=JSON.stringify(this.props.locationData))){
//this.configLocation(this.props.locationData);
this.props.initLocationData(this.props.locationData);
}
}
切换面板(e){
this.setState({open:!this.state.open});
}
handleRemove(mruCode){
此.props.removeLocation(mruCode)
}
把手舔(mruCode){
this.props.addLocation(mruCode)
}
所有地点(){
this.props.addAllLocation()
}
clearall(){
this.props.removeAllLocation()
}
手动检查位置(mruCode){
this.props.checkboxState(mruCode);
}
handleCheckedAdded(){
this.props.checkedLocation()
}
//更多非相关代码
//其他代码
render(){
const_labels=store.getLabels();
让collapsedToggle=this.props.open“折叠”:”
返回(
此.togglePanel(e)}>
{this.props.title}
{this.props.conLocations.map((loc,index)=>{loc.mruCode}-{u labels[loc.division]}-{loc.country}{index
{this.state.open(
位置列表this.handleCheckedAdded()}>添加选中此.allLocations()}>添加位置
{this.props.location.map((项,索引)=>(
this.handleChecklocation(item.mruCode)}style={{display:this.state.configuredList.find(item4=>item.mruCode====item4.mruCode)?“无”:“block”}/>{item.mruCode}-{u标签[item.division]-{item.country}{!this.props.conLocations.find(item=>item.mruCode==item.mruCode==item.mruCode)&(item.mruCode==item.mruCode)&>3.mruCode“:“无”:“block”}}className=“调用操作”onClick={()=>this.handleClick(item.mruCode)}>addlocation)}
)
已配置位置删除选中此.Removelocational()}>删除位置
{this.props.conLocations.map((locc,index)=>this.handleCheckedRemove(locc.mruCode)}/>{locc.mruCode}-{u labels[locc.division]}-{locc.country}
):null}
);
}
}
函数MapStateTops(状态){
返回{
位置:state.locationRed.location,
conLocations:state.locationRed.conLocations,
已检查:state.locationRed.isChecked
};
}
功能图DispatchToprops(调度){
返回bindActionCreators({
加载数据,
添加位置,
添加所有位置,
再加速,
移除所有位置,
checkboxState,
检查位置,
初始化位置数据
},派遣);
}
导出默认连接(MapStateTrops、mapDispatchToProps、null、{withRef:true})(NewLocationPanel);
如何呈现该列表console.log(this.props.conLocations)显示为空。如何将locationData值传递给它?是,现在已经解决了。我在componentWillReceiveProps(nextProps)生命周期方法中犯了错误。因为我在比较两个道具。所以,下面应该是这样的
componentWillReceiveProps(nextProps) {
if (nextProps.jobId != this.props.jobId || (JSON.stringify(nextProps.locationData) != JSON.stringify(this.props.locationData))) {
console.log(nextProps.locationData.locations.locationDetails);
this.props.initLocationData(nextProps.locationData.locations.locationDetails);
}
}
它现在工作正常。你的应用程序的初始状态是什么?是。。它位于以下位置:[]