Question

我有一个错误，其中有一个未说明的类型错误，如

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)

现在我正在处理两个文件，即App.jsx和Team-list.jsx，但我无法确定哪个文件导致错误。在我的getPlayers方法中，我返回一个由renderPlayers使用并由组件呈现的对象数组。这发生在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>
      )
    }
  }

然后在Team-list.jsx我尝试访问我在renderPlayers方法中传递的道具。

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

帮我确定错误原因。谢谢。

Answer 1

错误原因是

行

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

因此，虽然您在prop函数中发送了renderPlayers，但您并未在此处执行此操作。所以在这一行添加道具，错误就是

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

无法读取属性道具的反应

1 个答案: