javascript - 如何使用 ref 回调将对象数组从一个组件传递到 React js 中的另一个组件

Question

我有 jobdetails json，其中保存了位置详细信息。我必须将该位置详细信息从“作业”组件传递到我的位置组件。我尝试过使用 ref 回调。同时将该位置映射到我的组件中(位置详细信息)。它显示错误(.map 不是函数)。

到目前为止我已经完成了。

工作组件:

import React from 'react';
import ReactDOM from 'react-dom';
import LocationPanel from '../panels/NewLocationPanel';

class JobsPanelComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = { 
            jobDetailJson: this.props.jobDetailJson

        };
this.setLocationPanelRef = cRef =>{this.locationPanel = cRef;};

}
componentWillUnmount() {
        this.clearStates();
        this.clearRefs();
        this.clearBindings();
    }
          clearStates() {

        this.state.jobDetailJson = null;
        }
        clearRefs(){
               this.locationPanel = null;
                   }
        clearBindings(){
               this.setLocationPanelRef = null;
                       }
        componentWillMount() {
        this.state.jobDetailJson = this.props.jobDetailJson;
    }

    componentWillReceiveProps(nextProps) {
        this.state.jobDetailJson = nextProps.jobDetailJson;
    }
      render(){
         var locationDataJson= null;
             if(this.state.jobDetailJson != null){
                     locationDataJson =this.state.jobDetailJson.locations;
                   }
         return(<div className="panel-group" id="jobsPanelGroup">
               <LocationPanel ref={this.setLocationPanelRef} locationDataJson={locationDataJson} title="Location"></LocationPanel></div>
              );
         }


}

位置组件代码:

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               configuredList:[]
        };
        this.configLocation = this.configLocation.bind(this);
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
    }
    togglePanel (e){
        this.setState({open : !this.state.open});
    }
    handleClick (mruCode){
      this.props.addLocation(mruCode)
     }
     allLocations (){
       this.props.addAllLocation()
    }

    componentDidMount() {
        this.props.loadData();
        this.configLocation(this.props.locationDataJson);
      }
      componentDidUpdate(prevProps){
        if ((prevProps.jobId != this.props.jobId || prevProps.locationDataJson != this.props.locationDataJson) && this.props.locationDataJson != undefined) {
            this.configLocation(this.props.locationDataJson);
        }

    }

    configLocation(locationDataJson){
        let configuredList=[];
        if(locationDataJson != undefined && locationDataJson != null){
            locationDataJson.map(function(item){
               const nLoc = {...item};
                configuredList.push(nLoc);
            });
        }
        this.setState({configuredList});
        console.log(configuredList);
    }



    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.location.map((loc,index)=>loc.primary===true ? (<span>{loc.mruCode} - {_labels[loc.division]} - {loc.country}</span>):null)}
                           <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 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 className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  <div className="col-sm-6">
                                   <div><ConfiguredLocation/></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())}
    }
}


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

在我的位置组件中，this.props 显示为 null。在控制台中，它显示 locationDataJson.map 不是函数。我想我错过了一些东西或者我如何在我的组件中使用 locationDataJson 。这是 JobDetailsJson 中的 locations 结构。

Answer 1

在您的作业组件中，将this.state.jobDetailJson.locations更改为this.state.jobDetailJson.locations.locationDetails，因为 this.state.jobDetailJson.locations 是一个对象 .map 仅适用于数组

var locationDataJson= null;
if(this.state.jobDetailJson != null){
   locationDataJson =this.state.jobDetailJson.locations.locationDetails;
}