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

Question

我正在尝试循环一个作为prop传递给组件的数组（selectedItem.stats）。

我在网上看到了一些例子，但是当组件被定义为类时，它们都没有。

我想我将循环放在渲染函数中，在返回上方，但这似乎不起作用。我该怎么办呢？

我得到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的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' }]};是ItemDetails组件所接受的支柱。确保您的道具具有您尝试在组件中访问的所有字段，并且它应该有效。