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>

为每个key分配唯一的UserCard。

Answer 2

要添加到@Mayank答案，您可以在不编写显式返回语句的情况下通过在map函数之后使用()而不是{}来执行此操作，因为它默认情况下会自动返回其中的JSX

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

ReactJS在setState之后没有重新渲染

2 个答案: