用新数组更新React State

Question

Trying to update my new locations state into the general one without success. There are 2 Components : LocationsPage and EditLocationPopup.

LocationsPage:

constructor(props) {
    super(props)
    this.state = {
        name: '',
        address: '',
        longitude: '',
        latitude: '',
        locations: []
    };
}


//This one does'nt work

handleEditLocation(locations) {
    this.setState({ locations})
}

EditLocationPopup:

constructor(props) {
        super(props);
        this.state = {
            name: this.props.name,            //Got from other component
            address: this.props.address,
            longitude: this.props.longitude,
            latitude: this.props.latitude
        }
    }

saveEditedLocation() {
    const { name, address, longitude, latitude } = this.state
    var id = this.props.id
    var newLocation = {
        id,
        name,
        address,
        longitude,
        latitude,
        isToggled: false
    }
    var locations = this.props.locations.map(location => location.id === newLocation.id ? newLocation : location)

//locations in equal to the new locations that was updated.

//and passed to the LocationsPage
    this.props.handleEditLocation(locations)
}

Got some trying with Object.assign but they did'nt work

Answer 1

You have to bind this to handleEditLocation in the LocationsPage constructor, or else this will not be what you expect when you call it from EditLocationPopup .

constructor(props) {
    super(props)
    this.state = {
        name: '',
        address: '',
        longitude: '',
        latitude: '',
        locations: []
    };
    this.handleEditLocation = this.handleEditLocation.bind(this);
}