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

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

Answer 2

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

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

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

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

2 个答案: