Question

我不太清楚为什么会收到此错误。

react.js:20149 Uncaught Error: Objects are not valid as a React child (found: object with keys {showThreads}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `CreateRow`.(…)

以下是代码：

var ShowThreads = React.createClass({

    render: function() {
        return(
            <table>
                <tbody>
                    {this.props.thread}
                </tbody>
            </table>
        )
    }
});

var CreateRow = React.createClass({
    getInitialState: function() {
        return {
            threadVisible: false,
            threads: ['lorem', 'ipsum', 'imperator', 'quad'],
        }
    },

    onClick: function(){
        // this.getThreads()
        this.setState({threadVisible: !this.state.threadVisible})
    },

    render: function() {
        var showThreads = this.state.threads.map((thread) => {
            return (
                <ShowThreads thread ={thread}/>
            )
        });

        var rows = [(
            <tr onClick={this.onClick}>      
                    <td>{this.props.row['id']}</td>
                    <td>{this.props.row['email']}</td>
                    <td>{this.props.row['first']}</td>
                    <td>{this.props.row['last']}</td>
                    <td>{this.props.row['title']}</td>
                    <td>{this.props.row['company']}</td>
                    <td>{this.props.row['linkedin_url']}</td>
                    <td>{this.props.row['role']}</td>
                </tr>
            ),(
                <tr>
                    <td colSpan="8">
                         {
                            this.state.threadVisible
                            ? {showThreads}
                            : null
                        }
                    </td>
                </tr>
        )]
        return(
            <tbody>
                {rows}
            </tbody>
        )
    },

})

当我打印出showThreads时，它返回了一个包含4个对象的数组。不太确定我为什么会收到这个错误？目标是在每行下方创建4个“线程”，从onClick可见。

Answer 1

{showThreads}是一个对象，而不是您期望的数组。您想要一个简单的showThreads，因为条件已经在大括号内。

React：Uncaught Error：对象无效作为React子

1 个答案: