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

This stateless component is being render inside a class component render method. This stateless component then will return null or another class component based on the condition but it gives me an error.

此无状态组件正在类组件呈现方法内呈现。然后，此无状态组件将根据条件返回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     
                        }
            });
        }
    }

Error:

错误：

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

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

How do i return something as a result from the condition? i tried declaring variable like this but same error.

我如何从条件中返回一些东西？我尝试声明变量，但同样的错误。

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;
    }

2 个解决方案

#1

If no userId is found then nothing will be returned from the render, you need to return null if not userId is present like

如果没有找到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
}

#2

A render method cannot be asynchronous, the once method takes a callback as second argument. Returning something from a callback will not return a value from the calling method, unless you are using async or promise as mentioned in the comments.

render方法不能是异步的，once方法将回调作为第二个参数。从回调中返回内容不会从调用方法返回值，除非您使用注释中提到的异步或承诺。

What you should do is in componentDidMount, invoke the userRef.child(userID.uid).once and based on the return value, use setState in your component to trigger a re-render which will return either the admin panel or null/false.

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

If you want to keep your component stateless then you cannot run that logic inside, a stateless component will take props as input and always render the same output. You can move the asynchronous call to the parent or implement that logic somewhere else, in an action handler for example, this depends which flux implementation you are using.

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

#1