Question

在我的应用程序中，有一个locationData json是动态的。根据作业ID，对象数组的长度不同。现在，我有一个动作创建者。在我的组件中，我将此位置数据作为该动作创建者的参数传递。呈现列表时，出现此错误。我是Redux的新手，请帮助我解决错误所在。

到目前为止我已经尝试过

操作代码

export const initLocationData = conLocations =>({
  type: INIT_CONFIG_LOCATION,
  conLocations
});

Reducer代码

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);

如何呈现该conLocations列表？ console.log（this.props.conLocations）显示为空。如何将locationData值传递给它？

Answer 1

是的，现在解决了。我在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);
    }
}

现在工作正常。

无法读取null -redux列表的属性“ map”

1 个答案: