如何遍历`this.state`对象中的数组？

Question

我有一个GET提取数据的请求，数据中包含object，然后包含array中的object。然后，我使用this.setState，现在array在object中有一个object

问题是，当我尝试遍历数组时，我不能，因为我得到了一个

TypeError: this.state.games.games is undefined

如果我只有this.state.games，并尝试遍历，我会得到一个

TypeError: this.state.games.forEach is not a function

我已经通过一种try...catch方法解决了这个问题，但是我认为这不是解决此问题的最佳方法。

class HomePage extends Component {

    constructor(props) {

        super(props)

        this.state = {games: []}

    }

    componentDidMount() {

        axios.get(`http://localhost.com:5000/user/games`, {withCredentials: true})

            .then(res => {

                const games = res.data;

                this.setState({ games })

            })

    }

    render() {

        const games = [];

        try {

            this.state.games.games.forEach(function (game, index) {

                console.log(index) // index

                console.log(game) // value

                games.push(

                    <Grid.Column>

                        <MyGames key={index} game={{title: game.title, description: game.genre, thumbnail: game.thumbnail}}/>

                    </Grid.Column>

                )

            })

        }

        catch( e ) {

            console.log("Error: " + e );

        }

        return (

            <div>

                <Grid columns={1}>

                    <Grid.Column>

                        <FriendsList/>

                        <Header as='h3'>My Games</Header>

                        <Grid columns={4} container={'true'} padded>

                                {games}

                        </Grid>

                    </Grid.Column>

                </Grid>

            </div>

        )

    }

}

最后，我试图遍历从端点接收的数据并遍历每个索引并显示其属性。

Answer 1

你试图通过环this.state.games.games，但在你的构造，初值你给state的{ games: [] }。因此，this.state.games.games最初不是数组，这就是为什么出现错误的原因。两种修复方法。将状态初始化为一个反映您访问状态的结构：this.state = { games: { games: [] } };或者，可能是一个更好的主意，更改您的代码，以使您的数组this.state.games而不是this.state.games.games：.then(res => {&nbsp; &nbsp; const games = res.data.games;&nbsp; &nbsp; this.setState({ games })})// further below ...this.state.games.forEach(function (game, index) {

Answer 2

改变&nbsp; &nbsp; &nbsp; &nbsp; this.state.games.games.forEach(function (game, index) {&nbsp; &nbsp; &nbsp; &nbsp; })至&nbsp; &nbsp; &nbsp; &nbsp; this.state.games.forEach(function (game, index){&nbsp; &nbsp; &nbsp; &nbsp; })

Answer 3

您正在进行ajax调用，这是异步的，您尝试在ajax调用完成之前使用状态的游戏，因此导致错误&nbsp; //your render method&nbsp;render() {&nbsp; &nbsp; const games = [];&nbsp; &nbsp; &nbsp; if(this.state.games.games.length<=0){&nbsp; &nbsp; &nbsp; &nbsp;return <h1>Please wait while loading data</h1>&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; this.state.games.games.forEach(function (game, index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(index) // index&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(game) // value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; games.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MyGames key={index} game={{title: game.title, description: game.genre, thumbnail: game.thumbnail}}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; catch( e ) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Error: " + e );&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid columns={1}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FriendsList/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Header as='h3'>My Games</Header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid columns={4} container={'true'} padded>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {games}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.Column>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}直到从服务器加载数据之前，您可以显示一些动画而不是普通消息，