当尝试获取对象的#时,无法读取未定义的属性的“长度”

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (319)

我试图将我的玩家JSX中的玩家数量渲染到我的应用程序,但是当我尝试使其工作时继续得到Cannot read property 'length' of undefined

我的players.js(缩短为简洁)是这样的:

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

export default players;

在我的Container.js中,我有:

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

我希望能够渲染玩家的总数(在这个例子中它应该只有2个玩家)不起作用,我知道我的语法中的某些内容是非常不正确的。

我知道,这件事是错误的:

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

有任何想法吗?

提问于
用户回答回答于

你需要将玩家的道具传递到组件中,如下所示:

<Stats players={players} />

此外,你还可以在Stats组件中添加一个空检查,以处理未传入的玩家。

const totalPlayers = props.players ? props.players.length : 0;
用户回答回答于

Stats不是一个组件,而是一个函数,所以你必须将它重写为一个Reaction组件,或者将它作为实际的函数使用,即替换:

<Stats />

到:

{Stats(this.props)}

所属标签

可能回答问题的人

  • EatRice

    16 粉丝0 提问11 回答
  • 华讯云

    0 粉丝0 提问4 回答
  • 学生

    8 粉丝476 提问4 回答
  • 不吃貓的鱼oo

    7 粉丝466 提问3 回答

扫码关注云+社区

领取腾讯云代金券