Question

我有这个Json文件：

{  
   "id":0,
   "leagueCaption":"League Two",
   "rankings":[  
      {  
         "id":0,
         "position":1,
         "teamName":"Portsmouth",
         "wins":26,
         "draws":9,
         "losses":11,
         "points":87
      },
      {  
         "id":0,
         "position":2,
         "teamName":"Plymouth Argyle",
         "wins":26,
         "draws":9,
         "losses":11,
         "points":87
      },
      {  
         "id":0,
         "position":3,
         "teamName":"Doncaster Rovers FC",
         "wins":25,
         "draws":10,
         "losses":11,
         "points":85
      }
   ]
}

我正在尝试使用地图呈现列表，但是我无法通过具有子排名来呈现它，我需要将联赛标题渲染为标题，并在网格上显示排名，

我这样做了，但仍然无法正常工作，它返回一个错误，提示无法渲染，

我的要求：

getItems(event) {
        event.preventDefault();
        this.setState({ 'isLoading': true });
        API.getRanking(this.state.code)
            .then(items => this.setState({ items, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));

}

我的组件：

render() {
        return (
            <div>
                <table className="pure-table">
                    <thead>
                        <tr>
                            <th className="itemGrid">Position</th>
                            <th className="itemGrid">Points</th>
                            <th className="itemGrid">Name</th>
                            <th className="itemGrid">Wins</th>
                            <th className="itemGrid">Draws</th>
                            <th className="itemGrid">Defeats</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.props.items.map(function (team) {
                                return (
                                    <tr key={team.id}>
                                        <td>{team.position}</td>
                                        <td>{team.points}</td>
                                        <td>{team.teamName}</td>
                                        <td>{team.wins}</td>
                                        <td>{team.draws}</td>
                                        <td>{team.losses}</td>
                                    </tr>
                                );
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }

我的屏幕渲染：

return (
            <div className="container" >
                <div className="header">
                    <h1>Championship of Football</h1>
                </div>

                <ChampionshipForm 
                    onSubmit={this.getItems}
                    controlId='form'
                    id="code"
                    name="code"
                    value={this.state.code}
                    onChange={this.setCode.bind(this)}
                />

                <RankingTable items={this.state.items}/>
            </div>
        );

错误消息：

Answer 1

您的问题不是很清楚。但是我怀疑您正在访问可用的项目。尝试在组件中添加如下所示的简单检查

{
   this.props.items && this.props.items.map(function (team) {
        return (
            <tr key={team.id}>
                <td>{team.position}</td>
                <td>{team.points}</td>
                <td>{team.teamName}</td>
                <td>{team.wins}</td>
                <td>{team.draws}</td>
                <td>{team.losses}</td>
            </tr>
        );
    })
}

另一个可能的原因是items不是数组，因此items.map不是函数的原因。您可以在组件中控制台this.props.items并输入以下内容吗？

console.log(this.props.items);
console.log(typeof this.props.items)

上方的第二个控制台应打印阵列。如果没有，那么您传递的商品类型错误。

我注意到了另一件事。您的数组是rankings，items是上面json中的对象。考虑更改

 <RankingTable items={this.state.items}/>

到

 <RankingTable items={this.state.items.rankings}/>

带有子代的JSON解析器

1 个答案: