如何从无状态组件返回条件内的另一个组件

Question

这个无状态组件正在类组件渲染方法中渲染。然后这个无状态组件将根据条件返回 null 或另一个类组件，但它会给我一个错误。

const AdminTools = () => { 
        const userID = auth.currentUser;
        let userRef = firebase.database().ref("users");
        if(userID){
            userRef.child(userID.uid).once('child_added', snap => {
                if(snap.val().role == 'Admin'){
                    return <AdminPanel/>
                        } else {
                      return null     
                        }
            });
        }
    }

错误：

渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

如何根据条件返回某些结果？ 我尝试像这样声明变量但同样的错误。

const AdminTools = () => { 
        let res;
        const userID = auth.currentUser;
        let userRef = firebase.database().ref("users");
        if(userID){
            userRef.child(userID.uid).once('child_added', snap => {
                if(snap.val().role == 'Admin'){
                    res =  <AdminPanel/>
                        } else {
                    res = null     
                        }
            });
        }
           return res;
    }

Answer 1

渲染方法不能是异步的，once 方法将回调作为第二个参数。从回调中返回某些内容不会从调用方法返回值，除非您使用 cmets 中提到的 async 或 Promise。

您应该在componentDidMount 中调用userRef.child(userID.uid).once 并根据返回值在组件中使用setState 来触发重新渲染，该重新渲染将返回管理面板或null/false。

如果你想让你的组件保持无状态，那么你就不能在里面运行那个逻辑，一个无状态的组件会将 props 作为输入并总是呈现相同的输出。您可以将异步调用移至父级或在其他地方实现该逻辑，例如在动作处理程序中，这取决于您使用的通量实现。

Answer 2

如果未找到 userId，则渲染不会返回任何内容，如果没有 userId，则需要返回 null

const AdminTools = () => { 
    const userID = auth.currentUser;
    let userRef = firebase.database().ref("users");
    if(userID){
        userRef.child(userID.uid).once('child_added', snap => {
            if(snap.val().role == 'Admin'){
                return <AdminTools/>
            } else {
                  return null     
            }
        });
    }
    return null;   // return null here
}