Question

我正在尝试遍历作为道具传递给组件的数组（selectedItem.stats）。

我在网上看到了一些示例，但是当将组件定义为类时，所有示例都没有。

我认为我会将循环放在render函数内，在返回值上方，但这似乎不起作用。我该怎么办？

我得到stats is undefined。

这是我的代码：

class ItemDetails extends Component {

  render() {

    let stats = this.props.selectedItem.stats.map((item, key) =>
        <li><span className="stat-label">{item.name}</span><span className="stat-value">{item.value}</span></li>
    );

    return (
      <div>
        {this.props.selectedItem ? (
          <div id="item-details">
            <div id="item-stats" className="col">
              <h4>Stats</h4>
              <ul>{stats}</ul>
            </div>
          </div>
        ) : (
         <p>No Item selected</p>
        )}
      </div>
    );
  }
}

export default ItemDetails;

Answer 1

可能是您作为组件的支持获得的值可能没有所有字段。因此，当您尝试访问name的{{1}}和value属性时，这些值可能为空，因此不会显示在项目符号列表中。

以下是对我有用的代码：

item

在这里，import React from "react"; import ReactDOM from "react-dom"; const selectedItem = { stats: [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }]}; class ItemDetails extends React.Component { render() { let stats = this.props.selectedItem.stats.map((item, key) => ( <li key={key}> <span className="stat-label">{item.name}</span> <span className="stat-value">{item.value}</span> </li> )); return ( <div> {this.props.selectedItem ? ( <div id="item-details"> <div id="item-stats" className="col"> <h4>Stats</h4> <ul>{stats}</ul> </div> </div> ) : ( <p>No Item selected</p> )} </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<ItemDetails selectedItem={selectedItem} />, rootElement);是组件const selectedItem = { stats: [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }]};收到的道具。确保道具具有要在组件中尝试访问的所有字段，并且应该可以使用。

在定义为类的React组件内的数组上循环

1 个答案: