react hook出错:组件的值不断重新渲染

时间:2019-12-02 15:23:45

标签: reactjs google-cloud-firestore react-hooks

又是我,我仍然无法在redux上进行反应挂钩

我正在尝试使用useMemo方法从Firestore获取数据收集。

在用户登录并单击SignedIn组件中名为“配置文件”的下拉菜单项后,将调用UserDetailed组件。

在App.jsx中,我声明了使用UserDetailed组件的路径:

SELECT * FROM TABLE
QUALIFY ROW_NUMBER() OVER(PARTITION BY user ORDER BY timestamp) = 2;

SignedIn放置在导航栏中:

在NavBar.jsx中:

USER    TIMESTAMP
3       2019-11-13
2       2019-11-03
1       2018-11-07

在SignedIn.jsx中:

const App = () => {
return (
    <Fragment>
        <ModalManager />  
        <Switch>
            <Route exact path='/' component={HomePage}/>
        </Switch>
        <Route path='/(.+)' render={() => (
            <Fragment>
                // NavBar component is placed here
                <NavBar />
                <Container className="main">
                    <Switch>
                  <Route exact path='/blogs' component={BlogDashboard} />
                  <Route path='/blogs/:id' component={BlogDetailedPage} />
                  // Route for UserDetailed component is placed here
                  <Route path='/profile/:id' component={UserDetailed}/>      
                    </Switch>
                </Container>
            </Fragment>)} 
        />
    </Fragment>
);
};
export default App;

在UserDetailed.jsx中:

const NavBar = ({history}) => {
const firebase = useFirebase();
const auth = useSelector(state => state.firebase.auth, []);

const handleLogout = () => {
    firebase.auth().signOut().then(() => {
        history.push('/');
    });
};

const authenticated = auth.isLoaded && !auth.isEmpty;

return (
    <Menu fixed='top'>
        <Container>
            <Menu.Item as={NavLink} exact to='/blogs' name="Blogs"/>
            {authenticated ? 
                (<SignedIn signOut={handleLogout} />) : 
                (<SignedOut />)
            }
             </Container>
         </Menu>
)
}    

“ isCurrentUser”和“ getUserProfile”确实返回了我期望的值,但是它一直在重新渲染,直到达到最大深度并抛出“超过最大更新深度”错误为止。 为什么会这样?

0 个答案:

没有答案