Question

我有一个要在TabelHeaderColumn中显示哈希和名称的组件。我使用axios进行api调用时没有错误。我在BootstrapTable中写this.state.hash时没有得到任何数据的问题。我在这里错了什么？

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);

该组件使用，还原，反应，axios和来自coreui的引导模板。

我的引导程序可能有一些问题。因为它们不能正确显示数据。我没有错误接受它没有显示任何哈希值。预先感谢。

Answer 1

我是React的新手，但不确定在状态下存储组件jsx。数据输入正确吗？我会尝试将组织保存为状态，并通过props传递到bootstrap表，在bootstrap组件（在构造函数中）中，我将获取列表并使用map。我不知道这种方法是否会更好，但是如果哈希为空，有时地图会给您错误，并且它可能会破坏应用程序。

如何在数据表中获取哈希和名称？

1 个答案: