0

这个无状态组件正在类组件渲染方法中渲染。然后，此无状态组件将根据条件返回 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;
    }
4

2 回答 2

0

如果未找到 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
}
于 2018-01-21T11:07:21.053 回答
0

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

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

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

于 2018-01-21T14:16:44.467 回答