Зацикливание на массиве внутри компонента React, определенного как класс

Question

Я пытаюсь перебрать массив (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.Убедитесь, что ваш реквизит содержит все поля, к которым вы пытаетесь получить доступ в компоненте, и он должен работать.