Question

我试图将初始状态设置为空白，然后为组件加载Ajax请求的数据。但是，在运行ajax请求之前，我遇到了错误Uncaught TypeError: Cannot read property 'max_level' of undefined。我甚至尝试设置初始状态，但没有专门引用max_level属性，我收到错误。我不希望set将整个模式复制到初始状态，因为我的数据结构非常复杂且可以更改。

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

有什么想法吗？

Answer 1

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

这里;结果代码

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

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

1 个答案: