Kann nicht Eigentum Requisiten lesen react

Question

Ich habe diesen Fehler, wo es eine nicht erfasste Art Fehler das ist, sagt

Uncaught TypeError: Cannot read property 'name' of undefined 
    at TeamList.render (Team-list.jsx:10) 
    at ReactCompositeComponent.js:796 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238) 
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697) 

Im Moment habe ich auf zwei Dateien arbeite, die App.jsx und Team list.jsx ist, aber ich kann stelle nicht fest, welche den Fehler verursacht. In meiner getPlayers Methode gebe ich ein Array von Objekten zurück, das von renderPlayers verwendet und von der Komponente gerendert wird. Dies geschieht in den App.jsx

import React, { Component } from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import AppBar from 'material-ui/AppBar'; 
import { List } from 'material-ui/List'; 
import Divider from 'material-ui/Divider'; 

import Player from './Player.jsx'; 
import TeamList from './Team-list.jsx'; 
import TeamStats from './Team-stats.jsx'; 

export default class App extends Component { 
    getPlayers(){ 
    return [ 
     { 
     _id: 1, 
     name: "Emmanuel Francisco", 
     ballManipulation: 2, 
     kickingAbilities: 3, 
     passingAbilities: 2, 
     duelTackling: 2, 
     fieldCoverage: 2, 
     blockingAbilities: 2, 
     gameStrategy: 2, 
     playmakingRisks: 2, 
    }, 
    { 
    _id: 2, 
    name: "Tinker Tailor", 
    ballManipulation: 1, 
    kickingAbilities: 1, 
    passingAbilities: 1, 
    duelTackling: 2, 
    fieldCoverage: 2, 
    blockingAbilities: 2, 
    gameStrategy: 2, 
    playmakingRisks: 2, 
    }, 
    { 
    _id: 3, 
    name: "Soldier Spy", 
    ballManipulation: 2, 
    kickingAbilities: 3, 
    passingAbilities: 2, 
    duelTackling: 2, 
    fieldCoverage: 2, 
    blockingAbilities: 2, 
    gameStrategy: 1, 
    playmakingRisks: 1, 
    }, 
    ]; 
} 

renderPlayers(){ 
    return this.getPlayers().map((player) => (
    <TeamList key={player._id} player={player} /> 
)); 
} 

    render(){ 
    return (
     <MuiThemeProvider> 
     <div className="container"> 
      <AppBar 
      title="Soccer Application" iconClassNameRight="muidocs-icon-navigation-expand-more" showMenuIconButton={false} /> 
      <div className="row"> 
       <div className="col s12 m7"> <Player /> </div> 
       <div className="col s12 m5"> 
       <Divider/> 
        <List> 
        {this.renderPlayers()} 
        </List> 
       <Divider/> 
      </div> 
       <div className="col s12 m5"> <TeamList /> </div> 
      </div> 
      </div> 
     </MuiThemeProvider> 
    ) 
    } 
    } 

Dann in den Team-list.jsx Ich versuche, die Requisiten zuzugreifen, die ich in renderPlayers Methode übergeben.

import React, { Component } from 'react'; 
import Avatar from 'material-ui/Avatar'; 
import { ListItem } from 'material-ui/List'; 


export default class TeamList extends Component { 
    render(){ 
    return (
     <ListItem 
      primaryText={this.props.player.name} 
      leftAvatar={<Avatar src="player.jpg" />} 
     /> 
    ) 
    } 
} 

Helfen Sie mir, die Ursache des Fehlers zu bestimmen. Vielen Dank.

Answer 1

Die Ursache des Fehlers ist die Linie

 </div> 
      <div className="col s12 m5"> <TeamList /> </div> 
     </div> 

So, obwohl Sie prop in renderPlayers Funktion, die Sie nicht, dass hier zu senden. Fügen Sie also die Requisiten in dieser Zeile hinzu und der Fehler wird

 </div> 
      <div className="col s12 m5"> <TeamList player={this.getPlayers[0]}/> </div> 
     </div>