Question

我有反应组件，如：

 class UserList extends Component {
      render() {
        const {users} = this.props
        users.forEach(function(user){
            console.log(user.name)
            if(user.photos){
                console.log(user.photos.data[0].source)
                return (
                    <div>
                        <p>{user.name}</p>
                    </div>
                )
            }
        })
      }
    }

    export default UserList

但它给我的错误是should return valid react component but returned array or undefined ..

return函数应该返回组件吗？

我在这里缺少什么？

Answer 1

由于错误声明您需要返回有效的React元素。

修复方法是从render返回一个DOM节点，例如div。

class UserList extends Component {
    render() {
        return <div></div>;
    }
}

使用.forEach的更多内容不会向div返回有效的React元素，而是使用.map来生成您呈现的数组。

class UserList extends Component {
    render() {
        return <div>{ 
            this.props.users
                .filter(user => user.photos)
                .map((user) => {
                    return <li>{ user.name }</li>;
            }}
        </div>;
    }
}

来自数组的反应渲染值会产生错误

1 个答案: