如何在反应中访问多维数组值？

Question

What I'm trying to do is to get value from 'coords' array and output it to webpage. Other components are rendering fine. Right now I'm getting an error:

TypeError: Cannot read property '0' of undefined

Do I have some problems with syntax or I simply cant reach coords array?

Here is the full code of component

class Ships extends Component{
//get random integer from min to max value
getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }


LShip(){

var startXCoord =  this.getRandomInt(0,9);
var startYCoord =  this.getRandomInt(0,9);
var coords = [];
//orientation will be chosen randomly
var orientation = this.getRandomInt(1,4);
switch (orientation) {
  case 1:
    return(
 this.setState.coords =[
          {'xcoord':this.startXCoord,'ycoord':this.startYCoord},
          {'xcoord':this.startXCoord+1,'ycoord':this.startYCoord},
          {'xcoord':this.startXCoord + 2,'ycoord':this.startYCoord},
          {'xcoord':this.startXCoord,'ycoord':this.startYCoord+1}
        ]
    )
    break;

  case 2:
  return(
  this.setState.coords = [
          {'xcoord':this.startXCoord,'ycoord':this.startYCoord},
         {'xcoord':this.startXCoord+1,'ycoord':this.startYCoord},
         {'xcoord':this.startXCoord + 2,'ycoord':this.startYCoord},
         {'xcoord':this.startXCoord+1,'ycoord':this.startYCoord}
        ]
        )
    break;

  case 3:
  return (
  this.setState.coords =[
           {'xcoord':this.startXCoord,'ycoord':this.startYCoord},
         {'xcoord':this.startXCoord,'ycoord':this.startYCoord+1},
         {'xcoord':this.startXCoord,'ycoord':this.startYCoord + 2},
         {'xcoord':this.startXCoord+1,'ycoord':this.startYCoord}
       ]
     )
    break;

  case 4:
  return(
  this.setState.coords =[
           {'xcoord':this.startXCoord,'ycoord':this.startYCoord},
           {'xcoord':this.startXCoord,'ycoord':this.startYCoord+1},
           {'xcoord':this.startXCoord,'ycoord':this.startYCoord + 2},
           {'xcoord':this.startXCoord,'ycoord':this.startYCoord+1},
         ]
       )
    break;

  default:console.log('something went wrong');
      break;
}
}



IShip(IshipCount){
  this.length = 3;
  var startXCoord =  this.getRandomInt(1,10);
  var startYCoord =  this.getRandomInt(1,10);
  var coords = new Array[startXCoord,startYCoord];
}
DotShip(DotShipCount){
  this.length = 1;
  var xCoord =  this.getRandomInt(1,10);
  var startYCoord =  this.getRandomInt(1,10);
  var coords = new Array[xCoord,startYCoord];
}







render(){
  return(
    <h1>{this.coords[0].xcoord}</h1>
  )
}
}

Answer 1

Your this reference is probably different in the place that you are setting and calling it.

Either bind the function to this in the constructor like

this.LShip = this.LShip.bind(this);

Or maybe better yet store your coords in your state this.state and access it via this.state.coords[0].xcoord . This has the added benefit that your component will re-render if these change.