反應從一個數組渲染值給出錯誤

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>; 
    } 
}