无法读取属性道具的反应

Question

I have this error where there is an uncaught type error thats says

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)

Right now I am working on two files which is App.jsx and Team-list.jsx but I can't determine which one is causing the error. In my getPlayers method I am returning an array of objects that is used by renderPlayers and rendered by the component. This is happening in the 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>
      )
    }
  }

Then in the Team-list.jsx I try to access the props that I passed in renderPlayers method.

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" />}
        />
    )
  }
}

Help me determine the cause of the error. Thank you.

Answer 1

The cause of the error is the line

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

So although you are sending prop in renderPlayers function you are not doing that here. So add the props in this line and the error shall go

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