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

Question

我是这个平台上的新手，并且有一个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

Answer 1

这是一个模块导入问题。当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'));