反应从一个数组渲染值给出错误

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 ..

返回函数返回的组件吗？

我在这里错过了什么？

Answer 1

由于错误状态，您需要返回有效的React元素。

解决的办法是从您的render，例如div返回一个DOM节点。

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

进一步使用.forEach不会返回一个有效的做出反应元素到div，使用.map而不是产生渲染的数组。

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