Question

我使用React / Redux，并且解析了我正在接收的查询对象数组。我试图解析的数组包含在它自己的数组中，看起来像这样。

{map: "TheIsland", password: false, raw: {…}, maxplayers: 30, …}players:[{…}]....

阵列＆＃34;玩家＆＃34;是我遇到的问题。我收到并显示大部分查询数据都很好，但是当试图在＆＃34;播放器＆＃34;上运行.map时爆炸的名字＆＃34;某些文字的属性，我收到错误，

TypeError: Cannot read property 'map' of undefined

当我的组件安装时，我在构造函数中将player设置为空数组，以便在返回查询之前考虑运行.map。当我在接收它时控制.log，响应，＃34;玩家＆＃34;看起来像这样，

players: Array(3) 0:{name: "Jones", score: 0, time: 1573.2921142578125} 1:{name: "Matt", score: 0, time: 1348.6531982421875} 2:{name: "Skippy", score: 0, time: 285.5899963378906} length:3

我既不能抓住任何玩家信息，也不能抓住阵列长度。

这是我的全部内容。

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchStatus } from "./../actions";

import "./arkStats.css";

class ArkStats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      players: []
    };
  }

  componentDidMount() {
    this.props.fetchStatus();
  }

  renderPlayers() {
    return console.log(this.props.status);
    <div>
      {this.props.status.players.map((player, index) =>
        <p key={index}>
          Hello, {player.name}!
        </p>
      )}
    </div>
  }

  render() {
    return (
      <div>
        {this.props.status.name}
        {this.props.status.map}
        {this.renderPlayers()}
      </div>
    );
  }
}

function mapStateToProps({ status }) {
  return { status };
}

export default connect(mapStateToProps, { fetchStatus })(ArkStats);

Answer 1

地图无法读取玩家因为这是一个带钥匙的对象。如果您查看players:，您会看到0：{}，1：{}等。

如果数据存储方式如下，则应该像这样进行映射。

  renderPlayers() {
    return Object.keys(players).map((key, index) => {
       return(
          <p key={ index }> Hello, { players[key].name } </p>
       );
    });
  }

.map在另一个数组中的一个对象数组上：TypeError：无法读取属性＆＃39; map＆＃39;未定义的

1 个答案: