Object changes when selected with setState

Question

I made a question earlier which is mostly confused nonsense (Mongoose, array in object)

Now I Think I have narrowed it down to the following:

I have a list of drivers which has an Array of cars:

var driverSchema = new mongoose.Schema({

  driver: String,
  age: String,
  cars: [{ type: Schema.Types.ObjectId, ref: 'Car' }]

});
module.exports = mongoose.model('Driver', driverSchema);

A driver-object can be selected to ChoosenDriver like so:

 this.setState({choosenDriver:driver})

The problem is that the object Changes when selected. It changes from this:

drivers: array[3]
 ->0: {}
 ->1: {}
      _v: 0
      _id: "4242594395935934"
      name: "Roger"
      cars: Array[1]

to this:

choosenDriver: {..}
 _v:0
 _id: "235345353453"
 name: "Roger"
 cars: 
    ->_proto_ :{..} 
    0: "4242594395935934", 
   _id: undefined

cars is no longer an Array when the driver is selected. Anyone run into something similar maybe?

Update: I pass the list of drivers to a Child Component like this:

<DriversList drivers={this.props.drivers}

In DriversList i select a driver like this: (render-func should be enough to show you)

 handleDriverClick: function(i) {

  this.props.setChoosenDriver(this.props.drivers[i])
 },

render: function(){
    var self  = this;
    var drivers = this.props.drivers.map(function(driver,i){
     return <li key={driver._id} onClick={self.handleDriverClick.bind(null, i)}> {driver.name} </li>;
   });

And in the Parent :

 setChoosenDriver: function(driver) {
      this.props.setChoosenDriver(driver)

      },

And finally in the GrandParent i set the state:

 setChoosenDriver: function(driver) {

        this.setState({choosenDriver:driver})

      },

Update:

     getInitialState: function() {
      return {    
         drivers:[]
      };
      },

componentWillMount: function(){

    var self = this;
      request
         .get(Driversurl)
         .end(function(err, res){
          self.setState({drivers: res.body});
         });

    },

Its an Array of drivers wtih objects like:

{"_id":"5607b0747eb3eefc225aed61","name":"Moore","__v":0,"cars":["5607b0747eb3eefc225aed61","5607b07a7eb3eefc225aed62","5606bf4b0e76916c1d1668b4","5607b07a7eb3eefc225aed62"]}

more code needed: how is define drivers ? how do you proceed the select ? — François Richard, Sep 30 '15 at 19:15
I see nothing wrong with your code. What's in cars when you receive it in drivers ? — François Richard, Sep 30 '15 at 19:52
I Think it looks like it should when I receive it. This is very strange, Added update at bottom. — RogerDore, Sep 30 '15 at 20:02
I'm not sure this will solve your problem but don't execute your request in componentWillMount this is really wrong , execute it in componentDidMount (see this http://stackoverflow.com/questions/31995180/bindthis-not-working-on-ajax-success-function/31996156#31996156) — François Richard, Sep 30 '15 at 20:03

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

don't execute your request in componentWillMount this is really wrong , execute it in componentDidMount, see this for more details : bind(this) not working on ajax success function

Also I would parse you request result when you receive it, your problem may come from here

self.setState({drivers:JSON.parse(res.body)});

edited May 23 '17 at 11:51

Community

1
1

answered Sep 30 '15 at 20:05

François Richard

6,817
10
43
78

It did not solve my problem but thank you for trying! – RogerDore Sep 30 '15 at 20:17
are you working on cars somewhere in your code ? for me this is not a react problem but more the way your handling data – François Richard Sep 30 '15 at 20:25
Im gonna have a look in the morning, Thank you for all help – RogerDore Sep 30 '15 at 21:00

Object changes when selected with setState

1 Answers1