问尝试获取# of objects时，无法读取未定义的属性'length‘

EN

    const players = [
  {
    name: "Scott",
    score: 10,
    id: 1,
  },
  {
    name: "Justin",
    score: 40,
    id: 2,
  },
];

export default players;

import React, { Component } from 'react';
import update from 'react/lib/update';
import Counter from './Counter';
import Titles from '../../../scaffold/titles';
import styled from 'styled-components';
import players from './players';
import {ContainLeft} from '../../../helper/comps';

const ProjectTitle = styled.h1`
  color: white;
  margin-top: 1em;
  margin-bottom: 0;
`

const Copy = styled.p`
  color: #F86195;
  margin-top: 0;
  margin-bottom: 2em;
`

function Stats(props) {
  const totalPlayers = props.players.length;
  return (
    <div>
      <p>{totalPlayers}</p>
    </div>
  )
}

class Container extends Component {
  constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.state = {
      countInfo: []
    }
  }

  moveCard(dragIndex, hoverIndex) {
   const { cards } = this.state;
   const dragCard = cards[dragIndex];

   this.setState(update(this.state, {
      cards: {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragCard],
        ],
      },
    }));
  }

  render() {
    const listPlayers = players.map(player =>
      <Counter
        key={player.id}
        player={player}
      />
    );
    return(
      <ContainLeft style={{alignItems: 'center'}}>
        <Stats />
        <ProjectTitle>Score Keeper</ProjectTitle>
        <Copy>A sortable list of players that with adjustable scores.  Warning, don't go negative!</Copy>
        <div>
          {listPlayers}
        </div>
      </ContainLeft>
     )
  }
}    

export default Container

function Stats(props) {
  const totalPlayers = props.players.length;
  return (
    <div>
      <p>{totalPlayers}</p>
    </div>
  )
}