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后重新渲染

回答

相关问题