Вызов реагирующего компонента путем передачи исключения состояния - PullRequest
Новая
       24

Вызов реагирующего компонента путем передачи исключения состояния

0 голосов
/ 23 сентября 2019

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

Является ли это ошибкой в ​​«реагирующей таблице» или я ее используюнеправильный путь для этого потока данных?

Предупреждение: React.createElement: тип недействителен - ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: не определено.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга TransactionTable.

Также,

Неопределенное нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.

MapContainer.tsx 

class MapContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            transactions: []
        }
    }

    componentDidMount() {
        let self = this
        axios.get("http://localhost:8080/api/v1/XXXX", {}).then(resp => {
            console.table(resp)
            self.setState({transactions: resp.data})
            self.forceUpdate()
        }).catch((e) => {
            console.log(e)
        })
    }

    render() {
        return (
            <div>
                <GoogleMap
                    defaultZoom={16}
                    defaultCenter={{lat: 25.0389801, lng: 121.5272577}}
                    defaultOptions={{styles: null}}
                >
                    {this.state.transactions && this.state.transactions.map(transaction => (
                        <Item data={transaction}/>
                    ))}

                </GoogleMap>
                {this.state.transactions && <TransactionTable data={this.state.transactions}/>}
            </div>
        )

    }
}

TransactionTable.tsx 

import React, {useState, useEffect, Component} from "react";
import { useTable, useSortBy } from 'react-table'
import {ReactTable} from 'react-table'


class TransactionTable extends Component {
    constructor(props) {
        super(props);
        console.log(props)
        this.state = {
            data: props.data
        };
    }
    render() {
        const { data } = this.state;
        console.log("RECEIVED data")
        console.table(data)
        return (
            <div>
                <h1> Table </h1>
                <ReactTable
                    data={data}
                    columns={[
                        {
                            Header: "Name",
                            columns: [
                                {
                                    Header: "First Name (Sorted by Length, A-Z)",
                                    accessor: "transaction_id"
                                },
                                {
                                    Header: "Last Name (Sorted in reverse, A-Z)",
                                    id: "lastName",
                                    accessor: d => d.address
                                }
                            ]
                        },
                        {
                            Header: "Info",
                            columns: [
                                {
                                    Header: "estimate_address",
                                    accessor: "estimate_address"
                                }
                            ]
                        }
                    ]}
                    defaultPageSize={10}
                    className="-striped -highlight"
                />
            </div>
        );
    }
}
export default TransactionTable

Обновление

Пробовал этот способ импортировать ReactTable , но все еще не работает.

import ReactTable из таблицы реакций

1 Ответ

0 голосов
/ 23 сентября 2019

Правильный способ импорта ReactTable - import ReactTable from 'react-table';

...