ReactJS不會在setState後重新渲染

我有一個簡單的ReactJS應用程序，它加載用戶列表並顯示每個用戶的記錄。ReactJS不會在setState後重新渲染

這是處理用戶加載並將其顯示在列表中的組件，而UserCard組件將可視化用戶信息並允許進行編輯。

export default class UserManager extends React.Component { 
constructor() { 
    super(); 

    this.state = { 
     users:[] 
    }; 
}; 

componentDidMount() { 
    this.loadUsers(); 
}; 

loadUsers() { 
    $.getJSON('/api/users').then((data) => { 
     this.setState({ users: data.items }); 
    }); 
}; 

render() { 
    return (
     <div className="animated fadeIn"> 
      <div className="row"> 
       <div className="col-sm-8 col-md-10"> 
        <div id="userslist" className="userlist" > 
         { 
          this.state.users.map((user) => { 
           <UserCard user={user} /> 
          }) 
         } 
        </div> 
       </div> 
      </div> 
     </div> 
    ) 
}

}

我加載上componentDidMount的用戶，API調用的所有用戶數據成功返回。然而，不會觸發用戶的渲染。該列表將保持空白。

我在這裏錯過了什麼嗎？我是否必須再次手動觸發渲染？

來源

2017-06-05 Consec

返回從map身體UserCard組件時，如果不返回任何話，會在默認情況下返回undefined：

<div id="userslist" className="userlist" > 
    { 
     this.state.users.map((user) => { 
      return <UserCard user={user} /> 
     }) 
    } 
</div>

還是把它寫像這樣不使用{}，因爲，你只是想返回不需要無需任何計算或條件，使得{}一個組件：

<div id="userslist" className="userlist" > 
    { 
     this.state.users.map((user,i) => <UserCard key={i} user={user} />) 
    } 
</div>

分配唯一key到每個UserCard。

來源

2017-06-05 11:46:57

沒有這解決了我的問題。感謝您爲此提供解釋！ – Consec

爲了增加@Mayank答案，你也許可以做到這一點，而無需編寫一個明確的return語句，通過使用()代替{}地圖功能，所以不會automatially默認返回的JSX裏面

 <div id="userslist" className="userlist" > 
        { 
         this.state.users.map((user) => (
          <UserCard user={user} /> 
         )) 
        } 
       </div>

來源

2017-06-05 12:15:31

ReactJS不會在setState後重新渲染

回答

相關問題