Reactjs 为什么可以'；在React应用程序中显示阵列数据吗？

我对React的开发非常陌生，目前我正在尝试了解一些基本的React和redux内容。不幸的是，我遇到了一个我自己无法解决的问题

我已经编写了一个模拟api，它返回玩家（profileUrl、用户名、realname、id）。我正在发送一个动作，它成功地让我成为其中一名玩家，我还可以使用redux“

MapStateTrops

函数将其传递给我的组件道具。但是我不能在我的

render

函数中渲染这些数据。react开发工具甚至向我显示，单个玩家将作为数组返回

组件：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as playerActions from '../../actions/playerActions';

class SinglePlayer extends React.Component {

    componentDidMount() {
        this.props.actions.loadPlayer(this.props.match.params.playerid);
    }

    /**
     * Render the component.
     */
    render() {
        return (
            <div>
                { this.props.currentPlayer.username }
            </div>
        )
    }
}

/**
 * Defines the state which is exposed to this component.
 * 
 * @param { object } reduxStore The entire redux store. 
 * @param { object } ownProps The properties which belong to the component. 
 */
const mapStateToProps = (reduxStore, ownProps) => {
    return {
        currentPlayer: reduxStore.playerReducer.currentPlayer
    }
}

/**
 * Defines which actions are exposed to this component.
 * 
 * @param { function } dispatch This function is used to dispatch actions.
 */
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(playerActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SinglePlayer);

const players = [
    {
        profileUrl: 'https://profile.url',
        username: 'player1',
        realname: 'Max Muster',
        steamId: 'player1'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player2',
        realname: 'Max Mustermann',
        steamId: 'player2'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player3',
        realname: 'Maxime Musterfrau',
        steamId: 'player3'
    },
];

var player = players.filter(function(el) {
    return el.steamId === 'player1';
});

使用

.map（）

时出错：
TypeError:this.props.currentPlayer.map不是函数

---

有人能告诉我我做错了什么吗？

您将当前播放机的参数id设置为

componentDidMount

。在设置currentPlayer之前进行渲染，因此会出现错误。在渲染中添加重新检查，如下所示

render() {
        return (
            <div>
                { 
                  this.props.currentPlayer && 
                    this.props.currentPlayer.map(function(player, index) {
                      return <p>{ player.username }</>
                    )}
                }
            </div>
        )
    }

---

我认为从reduxDev工具来看，currentPlayer不在任何对象下。

在第一次渲染中，this.props.currentPlayer为空

---

将空数组“currentPlayer”设置为状态，并将this.props.currentPlayer插入this.state.currentPlayer并从状态进行渲染

我现在自己设法解决了这个问题。这里的帖子激发了我尝试新事物的灵感。正是我的模拟api以一种奇怪而意外的方式返回了数据（至少对我来说是意外的）

数据集：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as playerActions from '../../actions/playerActions';

class SinglePlayer extends React.Component {

    componentDidMount() {
        this.props.actions.loadPlayer(this.props.match.params.playerid);
    }

    /**
     * Render the component.
     */
    render() {
        return (
            <div>
                { this.props.currentPlayer.username }
            </div>
        )
    }
}

/**
 * Defines the state which is exposed to this component.
 * 
 * @param { object } reduxStore The entire redux store. 
 * @param { object } ownProps The properties which belong to the component. 
 */
const mapStateToProps = (reduxStore, ownProps) => {
    return {
        currentPlayer: reduxStore.playerReducer.currentPlayer
    }
}

/**
 * Defines which actions are exposed to this component.
 * 
 * @param { function } dispatch This function is used to dispatch actions.
 */
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(playerActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SinglePlayer);

const players = [
    {
        profileUrl: 'https://profile.url',
        username: 'player1',
        realname: 'Max Muster',
        steamId: 'player1'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player2',
        realname: 'Max Mustermann',
        steamId: 'player2'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player3',
        realname: 'Maxime Musterfrau',
        steamId: 'player3'
    },
];

var player = players.filter(function(el) {
    return el.steamId === 'player1';
});

使用的过滤器方法：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as playerActions from '../../actions/playerActions';

class SinglePlayer extends React.Component {

    componentDidMount() {
        this.props.actions.loadPlayer(this.props.match.params.playerid);
    }

    /**
     * Render the component.
     */
    render() {
        return (
            <div>
                { this.props.currentPlayer.username }
            </div>
        )
    }
}

/**
 * Defines the state which is exposed to this component.
 * 
 * @param { object } reduxStore The entire redux store. 
 * @param { object } ownProps The properties which belong to the component. 
 */
const mapStateToProps = (reduxStore, ownProps) => {
    return {
        currentPlayer: reduxStore.playerReducer.currentPlayer
    }
}

/**
 * Defines which actions are exposed to this component.
 * 
 * @param { function } dispatch This function is used to dispatch actions.
 */
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(playerActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SinglePlayer);

const players = [
    {
        profileUrl: 'https://profile.url',
        username: 'player1',
        realname: 'Max Muster',
        steamId: 'player1'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player2',
        realname: 'Max Mustermann',
        steamId: 'player2'
    },
    {
        profileUrl: 'https://profile.url',
        username: 'player3',
        realname: 'Maxime Musterfrau',
        steamId: 'player3'
    },
];

var player = players.filter(function(el) {
    return el.steamId === 'player1';
});

如果您假设一个由多个玩家组成的数组（如上所示），则所示的filtermethod将提取正确的对象，但仍将其包装在一个数组中。这就产生了错误

---

非常感谢你们的帮助

关闭标记未命中映射函数中的p？这只是一个严重的复制错误，即使标记已关闭，也无法工作。您是否在浏览器控制台上看到任何错误？在返回地图功能之前，请尝试

console.log

player。查看打印内容我甚至无法输入.map（）部分，我已经用收到的错误消息更新了帖子。我已经尝试了你的两种方法，但它们似乎都不适合我。我仍然收到错误“this.props.currentPlayer.map不是函数”。我已经测试了您的更新，并提供了redux devtools内部数据结构的新屏幕截图。第一个屏幕截图仅来自react开发工具。但它确实在playerReducer对象的内部。我已经实现了您的答案，它确实起了作用。谢谢你。您还让我更多地了解了react更新生命周期，这就是我最终自己发现问题的原因！谢谢！：）