Javascript reactjs在加载服务器响应之前向子级发送道具错误

我试图将初始状态设置为空白，然后加载Ajax请求中组件的数据。但是，在ajax请求运行之前，我遇到了一个错误，

uncaughttypeerror:cannotreadproperty'max_level'of undefined

。我甚至尝试设置初始状态，但没有特别引用

max\u level

属性，我收到了一个错误。我不想将整个模式复制到初始状态，因为我的数据结构非常复杂，可能会发生变化

class AvailableUpgradeContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      available_upgrades: []
    }
  }
  componentDidMount() {
    this.loadAvailableUpgradesFromServer();
  }
  loadAvailableUpgradesFromServer() {
    $.ajax({ ... })
  }
  render() {
    return (
      <AvailableUpgradeTable available_upgrades={this.state.available_upgrades} />
    )
  }
}

class AvailableUpgradeTable extends React.Component {
  render() {
    return (
      <div>
        {this.props.available_upgrades.map((building) =>
          <AvailableUpgradeTableRow max_level={building.max_level} />
        )}
      </div>
    )
  }
}

class AvailableUpgradeContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
可用的_升级：[]
}
}
componentDidMount（）{
this.loadAvailableUpgradesFromServer（）；
}
loadAvailableUpgradesFromServer（）{
$.ajax（{…}）
}
render（）{
返回(
)
}
}
类AvailableUpgradeTable扩展React.Component{
render（）{
返回(
{this.props.available_upgrades.map（（建筑）=>
)}
)
}
}

---

有什么想法吗？

我尝试将您的代码放入JSFIDLE，但它有一些语法错误。那些括号看起来很痛苦，所以我有点折衷到不再有语法错误的程度

在这里；结果代码是什么

class AvailableUpgradeTable extends React.Component {
  render() {
    return ( 
      <div> 
        { mapUpgrades(this.props.available_upgrades) } 
      </div>
    )
  }
  mapUpgrades(upgrades){
    upgrades.map(building => {      
        return (
            <AvailableUpgradeTableRow max_level={building.max_level} />
        )
    });
  }
}

class AvailableUpgradeTable扩展了React.Component{
render（）{
报税表（
{mapUpgrades（this.props.available_upgrades）}
)
}
地图升级（升级）{
升级。地图（建筑=>{
返回(
)
});
}
}

能否再次检查在出现错误之前是否没有调用

$.ajax

？在出现错误之后，$.ajax请求会成功。请尝试用curlys封装map函数下面的语句？您正在调用

this.props上的
.map（）
，但其他所有内容都引用此.state.available\u升级。如果这是有意的，您可以发布此组件实际使用位置的示例吗？另外，您的
AvailableUpgradeTable
组件需要有一个子元素（就像所有React组件一样）。当前，您正在返回
map（）
调用的结果，该调用将不起作用。用
或其他东西包装它（如我在jsbin上的示例）