Question

我在检索数据时遇到问题，我认为因为JSON之间有空格。处理它的好方法是什么，以便我可以正确使用JSON？我试图遍历每一场比赛并获得他们的身份但我认为＆＃34; NCAA Division I＆＃34;搞砸了。

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class GameList extends Component {

    state = { games: [] };

    componentWillMount() {
        axios.get('https://sportstakehouse.islandshore.net/dbdata/gameday/division')
        .then(response => this.setState({games: response.data}));
    }

    renderGames() {
        return this.state.games.map(game => <Text>{game.id}</Text>)
    }

    render() {
        return (
            <View>
                <Text>{this.renderGames}</Text>
            </View>
        );
    }
}

export default GameList;

这是我的反应代码，我试图让每个游戏ID都出来：

{
NCAA Division I: [
{
id: "4966",
api_id: "0a647d19-7150-4c66-92f1-f4f3fe9cd45d",
status: "scheduled",
scheduled: "2018-02-22 18:00:00",
conference_game: true,
game_time_date: "2018-02-22",
game_time_hour: "6:00pm",
home_team: {
id: "647",
api-id: "c851131a-5ecd-4670-81bc-b40f4837dd65",
name: "Owls",
alias: "FAU",
market: "Florida Atlantic",
conference-id: "74",
color-primary: "004B85",
color-secondary: "bb2f4c"
},
away_team: {
id: "646",
api-id: "bb384635-c3a0-459a-8f13-fcd7177313e5",
name: "Owls",
alias: "RICE",
market: "Rice",
conference-id: "74",
color-primary: "003D7D",
color-secondary: "d1d5d8"
},
venue: "FAU Arena",
broadcast_network: "",
broadcast_internet: "",
home_team_conference: "Conference USA",
away_team_conference: "Conference USA",
home_team_division: "NCAA Division I",
away_team_division: "NCAA Division I",
total_points_bet: 0,
total_points_bet_on_hometeam: 0,
total_points_bet_on_awayteam: 0,
featured: true
},
{
id: "4967",
api_id: "3c00c7ad-eaa7-4611-ba38-306e6d358332",
status: "scheduled",
scheduled: "2018-02-22 18:00:00",
conference_game: true,
game_time_date: "2018-02-22",
game_time_hour: "6:00pm",
home_team: {
id: "638",
api-id: "58d8baa3-7624-4b21-a47f-a23df2bf8859",
name: "Thundering Herd",
alias: "MRSH",
market: "Marshall",
conference-id: "74",
color-primary: "186329",
color-secondary: "be854c"
},
away_team: {
id: "648",
api-id: "ce967953-5c50-4220-87b2-99acb9606e84",
name: "Monarchs",
alias: "ODU",
market: "Old Dominion",
conference-id: "74",
color-primary: "00507d",
color-secondary: "a1d2f1"
},
venue: "Cam Henderson Center",
broadcast_network: "STADIUM",
broadcast_internet: "",
home_team_conference: "Conference USA",
away_team_conference: "Conference USA",
home_team_division: "NCAA Division I",
away_team_division: "NCAA Division I",
total_points_bet: 0,
total_points_bet_on_hometeam: 0,
total_points_bet_on_awayteam: 0,
featured: false
},

Answer 1

是的，你是对的，你给出的回答是无效的JSON。出于多种原因，不仅仅是因为钥匙上有空格。

要解决此问题，您需要编辑生成数据的位置，即您需要使响应有效：

{
     "NCAA Division I": [
        {
            "id: "4966",
            "api_id": "0a647d19-7150-4c66-92f1-f4f3fe9cd45d",
            "status": "scheduled",
            "scheduled": "2018-02-22 18:00:00",
            "conference_game": true,
            "game_time_date": "2018-02-22",
            "game_time_hour": "6:00pm",
            "home_team": {
                "id": "647",
                "api-id": "c851131a-5ecd-4670-81bc-b40f4837dd65",
                "name": "Owls",
                "alias": "FAU",
                "market": "Florida Atlantic",
                "conference-id": "74",
                "color-primary": "004B85",
                "color-secondary": "bb2f4c"
                ......
    }
}

但是，在对象中使用空格（而不是JSON）是完全有效的，因为您的键只是字符串所以：

const data = {
    'NCAA DIVISION I': []
}

有效且您可以非常轻松地与这些数据进行交互。做maps, filters等

[修改

我刚刚意识到你没有在你的类上设置构造函数，这意味着你没有内部状态：

class GameList extends Component { construtor(props){ super(props); this.state = {}; } .... }

Answer 2

问题是你正在尝试映射一个对象，它不是一个数组。如果您不需要密钥，则可以将this.state.games设置为返回的值。

axios.get('https://sportstakehouse.islandshore.net/dbdata/gameday/division')
        .then(response => this.setState({ games: Object.values(response.data) }));

我如何通过React处理远程JSON中的单词之间的间距

2 个答案: