在setState之后ReactJS不重新呈現

Question

我有一個簡單的ReactJS應用程序，該應用程序加載用戶列表並顯示每個用戶的記錄。

這是處理用戶負載並將其顯示在列表中的組件，而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調用成功返回了所有用戶數據。 但是不會觸發用戶的渲染。 該列表將保持空白。

我在這里想念什么嗎？ 我是否必須再次手動觸發渲染？

Answer 1

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

為每個UserCard分配唯一key 。

Answer 2

要添加到@Mayank答案中，您可能無需編寫顯式的return語句即可執行此操作，方法是在map函數之后使用()而不是{} ，因為默認情況下它會自動在其中返回JSX

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