javascript - ReactError＃130 |元素必须是字符串而不是对象

我是这个平台上的新手，而且reactjs输出有问题。

如果尝试使用react-table创建表，但出现以下错误:
该错误表示，反应需要一个字符串，但是我给了他们一个对象。但是我不明白哪个对象是什么意思。

您有什么主意，为什么会出现此错误以及如何解决此错误？

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at l (react-dom.production.min.js:12)
    at qc (react-dom.production.min.js:43)
    at K (react-dom.production.min.js:53)
    at n (react-dom.production.min.js:57)
    at react-dom.production.min.js:62
    at f (react-dom.production.min.js:130)
    at beginWork (react-dom.production.min.js:135)
    at d (react-dom.production.min.js:158)
    at f (react-dom.production.min.js:159)
    at g (react-dom.production.min.js:159)

代码:

class App extends React.Component {

    state = {
        text: this.props.test
    }

    render() {

        const data = this.state.text;
        console.log(data);

        const tmpData = [{
            "test": data.test,
            "test1": data.test1,
            "test2": data.test2
            }];

        const itemData = JSON.stringify(tmpData);
        console.log(itemData);

        return (
                  <div>
                    <br />
                    <strong>Note: Having the console open will slow performance</strong>
                    <br />
                    <br />
                    <ReactTable
                      data={itemData}
                      columns={[
                      {
                          Header: "Test",
                          accessor: "test"
                      },
                      {
                          Header: "Test1",
                          accessor: "test1"
                      },
                      {
                          Header: "Test2",
                          accessor: "test2",
                      }
                      ]}
                    />
                    <br />
                  </div>
                )
    }
}

谢谢!
问候，
MCW

最佳答案

这是模块导入问题。当React试图挂载ReactTable组件时，组件的类型是一个对象，因为ReactTable变量不包含ReactTable组件，而是ReactTable模块。

正确的导入表单全局模块应为:

const ReactTable = window.ReactTable.default;

您可以在这里尝试:
https://codepen.io/mazhuravlev/pen/QQdXbB。要重现该问题，请从ReactTable import语句中删除.default。

const ReactTable = window.ReactTable.default;

class App extends React.Component {

    render() {
        const tmpData = [{
            "test": 'test',
            "test1": 'test1',
            "test2": 'test2'
        }];
       const r = <ReactTable
                data={tmpData}
                columns={[
                    {
                        Header: "Test",
                        accessor: "test"
                    },
                    {
                        Header: "Test1",
                        accessor: "test1"
                    },
                    {
                        Header: "Test2",
                        accessor: "test2",
                    }
                ]}
            />;
        debugger;
        return r;
    }
}

ReactDOM.render(<App />, document.getElementById('app'));