Как получить хеши и имя в таблице данных? - PullRequest
Новая
       14

Как получить хеши и имя в таблице данных?

0 голосов
/ 14 января 2019

У меня есть этот компонент, который я хочу отобразить хэши и имя в TabelHeaderColumn. У меня нет ошибок на вызов API с Axios. Проблема, что я не получаю никаких данных, когда я пишу this.state.hashes в BootstrapTable. Что я здесь не так делаю? 

import React, { Component } from 'react';
import { connect }          from 'react-redux';
import {setFilter}        from '../../actions';
import axios                from 'axios';
import {
    BootstrapTable, 
    TableHeaderColumn
} 
    from 'react-bootstrap-table';

import {
    Card,
    CardHeader,
    CardBody,
    CardLink,
    Col,
    Form,
    FormGroup,
    Input,
    Label,
    Row
} from 'reactstrap';

const mapStateToProps = state => {
    return state;
};

const mapDispatchToProps = dispatch => {
    return {
        setFilter: filter => dispatch(setFilter(filter))
    };
};


class Filter extends Component {
    constructor(props) {
        super(props);

        this.selectHash = this.selectHash.bind(this);

        this.options = {
            sortIndicator: true,
            hideSizePerPage: true,
            paginationSize: 3,
            hidePageListOnlyOnePage: true,
            clearSearch: false,
            alwaysShowAllBtns: false,
            withFirstAndLast: false
          };

        this.state = {
            hashes: [
                <option key="" value="">Please wait ...</option>
            ]
        }
    }

    getHashes(){
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        let token    = userInfo.token;

        axios.get('/api/v1/organizations/', {
            headers: {
                'x-access-token': token,
                'Accept'        : 'application/json',
                'Content-Type'  : 'application/json;charset=UTF-8'
            }
        }).then(res => {
            console.log(res);

            let list = res.data.organizations;
            let keys = list.map((item) => { return (
                <TableHeaderColumn key={ item.hash } value={ item.hash } data-name={ item.name }>
                    { item.hash } ({ item.name })
                </TableHeaderColumn>
            ) });

            this.setState({ hashes: keys });
        }).catch(e => {
            console.log(e);
        });
    }

    selectHash(event) {
        if (this.props.filter.hash !== event.target.value) {
            this.props.setFilter({
                ...this.props.filter,
                hash: event.target.value,
                name: event.target.options[event.target.selectedIndex].dataset.name
            });
        }
    }

    componentDidMount() {
        this.getHashes();
    }

    render() {
        return (
            <div className="animated fadeIn">
                <Row>
                    <Col>
                        <Card>
                            <CardHeader>
                            <i className="icon-menu"></i>Orga Name and Hash
                                <div className="card-header-actions">
                                    <CardLink className="card-header-action btn-minimize">

                                    </CardLink>
                                </div>
                            </CardHeader>
                            <CardBody>
                            <BootstrapTable data={this.state.hashes} version="4" striped hover pagination search options={this.options}>
                            <TableHeaderColumn dataField="name" dataSort>Orga Name</TableHeaderColumn>
                            <TableHeaderColumn isKey dataField="hash">Hash</TableHeaderColumn>
                            </BootstrapTable>
                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Filter);

Компонент использует, redux, реагирует, axios и загрузочный шаблон из coreui.

У меня могут быть проблемы с загрузчиком. Потому что они не показывают данные правильно. Я не получаю ошибок принять, что он не показывает ни один из хэшей. Заранее спасибо.

1 Ответ

0 голосов
/ 15 января 2019

Я новичок в React, но не уверен насчет хранения компонента jsx в состоянии. Данные поступают правильно? Я попытался бы сохранить организации в состоянии и перейти к таблице начальной загрузки с помощью реквизита, а в компоненте начальной загрузки (в конструкторе) я бы получил список и использовал карту. Я не знаю, будет ли лучше подход, но иногда карта выдает ошибку, если хеш пуст, и это может сломать приложение.

...