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