Question

我正在将属性从父级传递给子级，并想要映射结果数组。

当我尝试控制台记录结果时，属性仅在第二次调用该函数之后才能到达。第一次返回“ []”。即使收到状态“用户”数组，对其进行映射也不会执行任何操作。

state={
    users: null
}

componentWillReceiveProps(){
    var userInLobby = this.props.users && this.props.users.map(userdata=>{
        if(userdata.status === "online"){
            var user = 
firebase.firestore().collection("users").doc(userdata.id).get().then(user=>{
                return {
                    username: user.data().username,
                };
            })
            return user

        }else{
            return null;
        }
        })
        var userInLobbyDisplay = []
        userInLobby && Promise.all(userInLobby).then(values => 
values.map(user=>{
            return userInLobbyDisplay.push(user)
        }))
        this.setState({
            users: userInLobbyDisplay
        })


}
render(){
console.log(this.state.users)
return(
<div className="lobby">
{
        this.state.users && this.state.users.map(user=>{
            return user.username
    })
}
</div>
)

第一次接收道具时如何将用户数组从状态映射到DOM？

Answer 1

您正在使用即将被弃用的API，应遵循文档指南并切换到较新的API，尤其是新的getDerivedStateFromProps。您可以阅读更多here。

static getDerivedStateFromProps(props, state) {
    // Your code here
  }

在componentWillReceiveProps的第二次加载后状态更新，并且不会映射

1 个答案: