JSON-парсер с ребенком

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