Таблица создает больше таблицы, а не новую строку

Я пытаюсь заполнить данные таблицы React Bootstrap, используя один массив объектов. Я хочу создать новую строку для каждого объекта и с одним заголовком таблицы для каждого столбца, но вместо этого он создает новые таблицы.

Я попытался переместить функцию карты ("this.props.data.map((person, key) =>") внутрь, где она вызывается/рендерится, и в несколько других мест, поэтому она не вызывает компонент несколько раз, но я у меня проблемы с синтаксисом.

const columns = [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'firstName',
    text: 'First Name'
}, {
    dataField: 'lastName',
    text: 'Last Name',
    sort: true
}, {
    dataField: 'birthDate',
    text: 'Birth Date'
}, {
    dataField: 'email',
    text: 'Email'
}];

    render(){
        return(
            <div>
                {this.props.data.map((person, key) =>
                    <div key={key} >
                        <BootstrapTable
                            hover
                            condensed={true}
                            bootstrap4={true}
                            keyField='id'
                            data={person}
                            columns={columns}
                            />
                    </div>
                )}
            </div>
        );
    }

reactjs react-bootstrap bootstrap-4 react-bootstrap-table
person Pray    schedule 25.04.2019    source источник
comment
свойство data принимает массив или просто объект?   -  person Cyro Dubeux    schedule 26.04.2019
comment
Похоже, он принимает один объект Array. реакция-bootstrap- table.github.io/react-bootstrap-table2/docs/   -  person Pray    schedule 26.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вам не нужно отображать массив. Все, что вам нужно сделать, это ввести this.props.data в поле data.

data={this.props.data}

Затем, пока ключи, т.е. firstName, lastName и т. д., находятся в объектах, он должен распечатать для вас таблицу.

Это предполагает, что ваш массив выглядит так:

[{firstName: 'Bob', lastName: 'Sagget',...}, {firstName: 'George', lastName: 'Bobbish',... }]

Полное заявление о возврате:

return(
        <div>
             <BootstrapTable
              hover
              condensed={true}
              bootstrap4={true}
              keyField='id'
              data={this.props.data}
              columns={columns}
              />
        </div>
    );
person seanulus    schedule 25.04.2019
comment
Спасибо. Вы правы, мне просто нужно было поместить this.props.data в данные! - person Pray; 26.04.2019
comment
Без проблем. Мне пришлось серьезно повоевать с этим компонентом. Удачи! - person seanulus; 26.04.2019
comment
Хороший! Это именно то, что я подозревал. - person Cyro Dubeux; 26.04.2019