Reactjs 通过传递状态异常调用react组件

我试图从

MapContainer

从服务器抓取数据后，我将呈现

TransactionTable

组件

这是“react table”中的错误，还是我对该数据流使用了错误的方法

警告：React.createElement:类型无效--应为字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：未定义。您可能忘了导出您的 组件，或者您可能已经混淆了 默认导入和命名导入

检查

TransactionTable

的呈现方法

而且

未捕获不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义

MapContainer.tsx

类MapContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
交易：[]
}
}
componentDidMount（）{
让self=这个
axios.get（“http://localhost:8080/api/v1/XXXX“，{}）。然后（resp=>{
控制台表（resp）
self.setState（{transactions:resp.data}）
self.forceUpdate（）
}).catch（（e）=>{
控制台日志（e）
})
}
render（）{
返回(
{this.state.transactions&&this.state.transactions.map（transaction=>(
))}
{this.state.transactions&&}
)
}
}

TransactionTable.tsx

import React，{useState，useffect，Component}来自“React”；
从“反应表”导入{useTable，useSortBy}
从“反应表”导入{reactable}
类TransactionTable扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）
此.state={
数据：道具数据
};
}
render（）{
const{data}=this.state；
console.log（“接收到的数据”）
控制台.表格（数据）
返回(
桌子
d、 地址
}
]
},
{
标题：“信息”，
栏目：[
{
标题：“估计地址”，
访问者：“估计地址”
}
]
}
]}
defaultPageSize={10}
className=“-striped-突出显示”
/>
);
}
}
导出默认TransactionTable

更新 尝试以这种方式导入反应表，但仍不起作用

从“反应表”导入反应表

---

导入ReactTable的正确方法是从“react table”导入ReactTable

正如错误消息所说，您混淆了默认导入和命名导入。它应该是

从“react table”导入ReactTable

，不带括号。的可能副本将不起作用。相同的例外情况：（检查ReactTable的数据值和列是否按照ref中提到的格式分配：

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

    }
}

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