Question

我正在尝试获取包含有关多个对象的信息的json文件，但似乎无法正确处理。我是个新手，所以我可能会把各种东西，状态和道具或其他东西混在一起。

我已经成功从控制台中的json接收了对象列表，但是我无法在return语句中显示它们。

感谢您的帮助！

import React from 'react';
import ReactDOM from 'react-dom';

class PlayerFeed extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            'playerList': []
        };
    }
    componentDidMount() {
        this.getPlayers();
    }

    getPlayers() {
        fetch('http://link.to/json/players/')
            .then(results => results.json())
            .then(results => console.log(results))
            .then(results => this.setState({'playerList': results}));
    }
    render() {
        return (
                <ul>
                    {this.props.state.map(function(players, index) {
                    return (
                        <div key={index}>
                                <h1>{this.props.age}</h1>
                                <p>{this.props.height}</p>
                        </div>
                    )
                }

                )}
            </ul>
        );
    }
}

ReactDOM.render(
    <PlayerFeed />,
    document.getElementById('root')
);

Answer 1

道具和国家基本上是两个不同的实体。

道具是提供给组件的数据
状态是在组件中定义的数据

查看您的代码，因为它是单级组件，所以没有提供任何支持。您应该将代码更改为-

{this.state.playerList.map(function(players, index) {
                return (
                    <div key={index}>
                            <h1>{players.age}</h1>
                            <p>{players.height}</p>
                    </div>
                )})}

假设您的playerList对象具有age和height属性。

希望这可以解决：）

Answer 2

我认为您应该在状态中循环播放器列表而不是道具。道具是从父组件获得的。

render() {
    return (
            <ul>
                {
                for(var player of  this.state.playerList) {
                  return (
                    <div key={player.index}>
                            <h1>{player.age}</h1>
                            <p>{player.height}</p>
                    </div>)
                }
            }
        </ul>
    );
}

此外，您可以在chrome中安装react开发插件，以查看状态和道具中的值。

在带有状态和道具的列表中显示JSON对象

2 个答案: