我试图从我的播放器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>
)
}
有什么想法吗?
发布于 2017-06-29 05:51:45
您需要将玩家道具传递给组件,如下所示:
<Stats players={players} />
此外,您还可以在Stats组件中放置一个空检查,以处理未传入的玩家。
const totalPlayers = props.players ? props.players.length : 0;
发布于 2017-06-29 05:58:20
Stats
不是一个组件,它是一个函数,所以你必须将它重写为React组件,或者实际使用它作为函数,即replace:
<Stats />
..。通过以下方式:
{Stats(this.props)}
https://stackoverflow.com/questions/44813059
复制相似问题