Question

我对React的开发很陌生，我现在正试图了解一些基本的反应和减少的事情。不幸的是，我遇到了一个我无法自行解决的问题。

我写了一个返回玩家的mock-api（profileUrl，username，realname，id）。我正在派遣一个动作，成功地让我成为其中一个玩家，我也可以使用redux＆＃39;将它传递给我的组件道具。 mapStateToProps功能。但我无法在render函数中呈现任何数据。反应装置工具甚至告诉我单个玩家将作为阵列返回。

组件：

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);

React DevTools：
Screenshot of React Devtools props

Redux DevTools：
Screenshot of Redux Devtools data 从上图中可以看出，currentPlayer道具位于playerReducer对象内。

我也试过像这样循环遍历数组，也没有成功。我只是收到错误消息，指出.map()不是函数。

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

使用.map()时出错：
TypeError：this.props.currentPlayer.map不是函数有人能告诉我我做错了吗？

Answer 1

您可以通过componentDidMount处的参数ID设置当前玩家。您的渲染发生在设置currentPlayer之前，因此错误。在您的渲染中添加一个重新检查，如下所示。

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

或

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

无论哪种方式都应该有效。这种方式this.props.currentPlayer在可用之前不会被呈现或访问。

<强>更新

将您的mapStateToProps更改为

const mapStateToProps = (state) => {
    return {
        currentPlayer: state.currentPlayer
    }
}

我认为从你的reduxDev工具中，currentPlayer不在任何对象之下。

Answer 2

首先渲染this.props.currentPlayer为空！

设置空数组＆＃34; currentPlayer＆＃34;在state和insert中插入this.state.currentPlayer中的this.props.currentPlayer并从状态中呈现

Answer 3

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

数据集：

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会提取正确的对象，但仍会将它包裹在一个数组中。这就产生了错误......

非常感谢帮助人员！

为什么我不能在React Application中显示数组数据？

3 个答案: