Question

我回来的json响应status看起来像这样。

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

我试图将players属性的当前名称映射到单个JSX元素，但.map返回错误

TypeError：无法读取属性＆＃39; map＆＃39;未定义＆＃34;当应用于＆＃34; props.status.players
时

我怀疑这是因为组件在fetchStatus()返回status之前加载，因此.map正在undefined属性players上运行。我添加了constructor，但由于语法错误，现在React无法编译。

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 (
      <div>
        {this.props.status.players.map((players, index) =>
          <p key={index}>
            Hello, {players.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);

感谢我对构造函数的修复！然而，当＆＃34; .map＆＃34;在＆＃34; status.players＆＃34;上执行。（说它还没有定义。）以下是控制台登录Chrome时出现的播放器。

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

Answer 1

首先，您不必在构造函数中使用this.setState，只需说this.state = {...}

其次，原因可能是因为就像你说的那样的球员＆＃39;组件首次安装时，值未定义。因此，只需在renderPlayers()函数中添加一个检查，即

If 'players' value exists, return a map of it, else return null

Answer 2

你是对的，fillna不是一个数组，直到你的API调用完成，这就是为什么你需要初始化你的react组件上的状态来处理第一个渲染。

像这样：

df.reindex([1,2,3,4,5]).fillna(0)
Out[107]: 
Cu        0     1     2
node1                  
1       8.0  16.0  22.0
2       5.0  25.0   0.0
3       0.0   0.0   0.0
4       0.0   0.0   0.0
5      10.0   0.0   0.0

此行导致语法错误players comments in JSX与Javascript代码块注释类似，必须用大括号（constructor(props){ super(props); this.state = { players: [] } }）包装。

你似乎还有一个额外的大括号：

// {this.renderPlayers()}

Answer 3

语法错误，因为你在构造函数中有额外的大括号'}'，在构造函数中你不能使用setState而不是初始化状态。所以你的构造函数将是

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

由于构造函数中的extra}导致的语法错误

constructor(props){
      super(props);
      this.setState({players: []});
    } // This one
  }

您可以将JSX中的代码注释从// {this.renderPlayers()}更改为{/*this.renderPlayers()*/}

在尝试映射对象数组时，React无法编译

3 个答案: