javascript - react : Uncaught Error: Objects are not valid as a React child

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 来代替，因为条件已经在大括号内。