ReactJS 在服务器响应加载之前将 props 发送到子级错误

reactjs sending props to children error before server response loads

本文关键字：错误 props 服务器 响应 加载 ReactJS      更新时间：2023-09-26

我正在尝试将初始状态设置为空白，然后加载Ajax请求组件的数据。但是，在ajax请求运行之前，我遇到了错误，Uncaught TypeError: Cannot read property 'max_level' of undefined.我什至尝试设置初始状态，但没有专门引用 max_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>
    )
  }
}

有什么想法吗？

我尝试将您的代码放入 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} />
        )
    });
  }
}
相关文章：