Objects are not valid as a React child

最新推荐文章于 2024-03-05 12:04:31 发布

原创最新推荐文章于 2024-03-05 12:04:31 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

6 篇文章

订阅专栏

本文解析了一个常见的React开发陷阱：在render函数中直接渲染对象而导致的错误。通过具体代码示例，阐述了如何避免此类错误，即使用数组代替对象进行渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己写一个简单的React组件的时候，因为

Objects are not valid as a React child (found: Sat Feb 23 2019 16:18:01 GMT+0800 (China Standard Time)). If you meant to render a collection of children, use an array instead.

这个错误卡了好久，心累

最后才发现是因为在render函数中渲染了对象导致的

下面是错误的代码

class Clock extends Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }
    componentWillMount() {
        setInterval(()=>{
            console.log(this.state.date.toLocaleString())
            this.setState({
                date: new Date()
            })
        }, 1000)
    }
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                // 出错的地方
                <h2>It is {this.state.date}</h2>
            </div>
        );
    }
}