Динамическое создание строк таблицы с помощью React - PullRequest
Новая
       28

Динамическое создание строк таблицы с помощью React

0 голосов
/ 05 июля 2018

Я пытаюсь создать таблицу с использованием React и React-Bootstrap, в которой есть произвольное количество строк таблицы. Предполагается, что в таблице хранятся данные о статистике игроков определенной видеоигры, и в зависимости от видеоигры статистика может изменяться, поэтому количество строк и заголовков этих строк также должно быть в состоянии динамически меняться. Я хотел создать массив в состоянии, в котором содержится список текущей статистики, затем сопоставить этот массив с элементом с помощью функции map и отобразить таблицу. Тем не менее, после попытки нескольких подходов я не могу получить любой пользовательский ввод для рендеринга. Ниже приведен код:

Структура класса 

class Statistics extends Component {
  constructor(props) {
    super(props)
    this.state = {
      game: '',
      player_names: [],
      positions: [],
      stat_categories: [
        'kills',
        'deaths',
        'assists'
      ]
    }
  }

  renderTableRows(array) {
    return (
      <tr>
        <th> NAME </th>
        <th> TEAM </th>
        <th> POSITION </th>
        { array.map(item => {
            console.log(item)
            <th key={item}> {item} </th>
          })
        }
      </tr>
    )
  }

  render() {
    const columnLength = this.state.player_names.length
    const statCols = this.state.stat_categories

    return (
      <div>
        <MyNav url={this.props.location.pathname} />
        <Table responsive striped bordered hover>
          <thead>
            { this.renderTableRows(statCols) }
          </thead>
        </Table>
      </div>
    )
  }
}

Консоль также правильно регистрирует данные в состоянии (убивает, умирает, помогает), поэтому проблема заключается в рендеринге элемента. Любая помощь будет оценена!

Ответы [ 4 ]

0 голосов
/ 06 марта 2019

Я дам вам аналогичный ответ о том, что вы предлагаете, но это своего рода другой подход с отличным решением

Итак, вы пытаетесь создать динамическую таблицу, но вы делаете статические строки таблицы, что я делал, позволяя таблице получать массивы заголовка и данных, а затем создавать столько строк или данных, сколько требуется.

вот код 

export function objectIntoTableData(object) {
 return Object.values(object).map((data, index) => {
   return  <td key={index}>{data}</td>;
  });
}

Вы должны изменить этот индекс на (значение, индекс) =>, это только мое использование 

tableRows(data) {
 return data.map(value => {
   return <tr key={value.index}>{objectIntoTableData(value)}</tr>;
 });
}

<thead>
  <tr>
    {head.map((value, index) => {
      return <th key={index}>{value}</th>;
    })}
 </tr>
</thead>
<tbody>{this.tableRows(data)}</tbody>

Скорее используйте id или index внутри вашего объекта, так как обратный вызов index функции map небезопасен для ключей. 

 <ReactTableUse 
     head={["#", "Cell1", "Cell2", "Cell3"]}
     data={[{id:1, test:1},{id:2, test:2}]} 
 />
0 голосов
/ 05 июля 2018

Вы должны визуализировать каждый элемент в отдельных tr с, а не в серии th с 

renderTableCols(array) {
  return array.map(item => <th>{item}</th>)
}

renderTableColValues(item, cols) {
  return cols.map(col => <td>{item[col]}</td>)
}

renderTableRows(array) {
  return array.map(item =>
    <tr>
      <td>{item.name}</td>
      <td>{item.team}</td>
      <td>{item.position}</td>
      {this.renderTableColValues(item, this.cols)}
    </tr>
  );
}

render() {
  return (
    <Table>
      <thead>
        <tr>
          <th>NAME</th>
          <th>TEAM</th>
          <th>POSITION</th>
          {this.renderTableCols(this.cols)}
        </tr>
      </thead>
      <tbody>
        {this.renderTableRows(items)}
      </tbody>
    </Table>
  );
}

Больше на столах https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

0 голосов
/ 05 июля 2018

Правила: Когда ваше состояние изменится, будет вызван метод рендеринга компонента, основанного на классе. Вопрос: кто изменит государство? это будет расти внутри компонента? В чем твоя проблема ? Вы не можете ничего сделать? или статистика не отображается динамически? если вы хотите изменить его динамически, вам нужно сначала изменить состояние.

0 голосов
/ 05 июля 2018

У вас нет оператора возврата в функции карты, внутри renderTableRows.

При использовании функций стрелок ES6 вы можете:

  • Возврат данных напрямую без оператора возврата 

    (args) => (returnedData);

  • Или добавьте некоторую логику вместо прямого возврата 

    (args) => {
  // Logic here

  return returnedData
}

Во втором случае вам понадобится оператор return, потому что вы регистрируетесь, если вы решите удалить запись, идите первым путем.

Также, пожалуйста, оставьте код прямо в своем вопросе, так как использование изображения делает его менее читаемым и не индексируется поисковыми системами.

...