Question

我有一个配置好的列表，其中包含位置详细信息。初步检索详细信息后，如果我删除任何一个或多个位置项目并进行更新。它没有采用更新的值。我认为componentdidupdate无法正常工作。解决方法

组件代码：

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[],
               clearList:[]
        };
       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);
    }

    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()
    }

    componentDidMount() {
        this.props.loadData();
        if(this.props.locationData !=null && this.props.locationData!= undefined){
            this.configLocation(this.props.locationData);
        }
      }

    componentDidUpdate(prevProps,prevState){
        console.log(prevProps);
        if (prevProps.locationData != this.props.locationData) {
            this.configLocation(this.props.locationData);
            console.log(this.props.locationData);
        }

    }

    configLocation(locationData){
        let configuredList =[];
        if(locationData.locations.locationDetails != null && locationData.locations.locationDetails !=undefined ){
            configuredList = locationData.locations.locationDetails;
        }
        else if(locationData.locations.locationDetails === null){
            configuredList = [];
        }
        this.setState({configuredList});
    }

    removeConfigLocation(index){
        this.setState(({configuredList})=>{
            let remList = [...configuredList]
            remList.splice(index,1)
            return {
                configuredList:remList
            }
        })
    }


    getLocationData(){
         let saveableLocationlist = [];
         if(this.props.locationData === null){
             saveableLocationlist = [];
         }
        const locationData = {
            locationDetails : saveableLocationlist
        }
      return locationData;
    }

    render(){
        //const{configuredList} = this.state;
        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.state.configuredList.map((loc,index)=><span key={index}>{loc.mruCode} - {_labels[loc.division]} - {loc.country}</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"><h3>Locations List</h3><button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={()=>{this.allLocations()}}>Add all locations</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!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"><h3>Configured Location</h3><button className="allLargeBtn" onClick={()=>this.clearall()}>Remove all location</button></div><hr/>
              <div><table className="table"><thead>{this.state.configuredList.map((locc,index)=><tr key={index}><th><b>{locc.mruCode} - {_labels[locc.division]} - {locc.country}</b></th><th className="text-right"><img alt="DeleteIcon" onClick={()=>{this.removeConfigLocation(index)}} className="deleteIconStyle" src="img/delete_large_active.png" /></th></tr>)}</thead><tbody>
                        {this.props.conLocations.map((loct,index)=><tr key={index}>
                           <td><b>{loct.mruCode} - {_labels[loct.division]} - {loct.country}</b></td>
                           <td className="text-right"><img alt="DeleteIcon" onClick={()=>this.handleRemove(loct.mruCode)}className="deleteIconStyle" src="img/delete_large_active.png" /></td>
                        </tr>
                        )}
                    </tbody></table></div>

                                   </div>
                                  </div>
                                  </div> 
                    </div>):null}
            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())},
        removeLocation: (mruCode)=>{dispatch(removeLocation(mruCode))},
        removeAllLocation: () =>{dispatch(removeAllLocation())}
    }
}


export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);

在componentDidUpdate方法中检查console.log（this.props.locationData）时，最初是在提供列表项。删除任何项目后，如果我保存更改，那么它也会给出与已删除项目相同的列表项目。如何使其工作？

Answer 1

您似乎并没有在this.props.locationData（或除初始removeConfigLocation以外的任何位置）上更新GET。老实说，您使用locationData的方式应该放在state中，而不是props中。

还应注意，您在以下几行中声明了自己的状态：

// before: this.state={ open:false, configuredList:[], clearList:[] };
this.setState(({configuredList})=>{
    let remList = [...configuredList]
    remList.splice(index,1)
    return {
        configuredList:remList
    }
})
// after: this.state={ configuredList: remList};

如果要在更新后保持可用状态，请确保spread（...this.state）。

ComponentDidUpdate在更新时不起作用

1 个答案: