Question

我有一个“标头”组件和另外两个要在不同条件下显示的组件。

renderUserHeader = () =>{

    if(sessionStorage.getItem('user-auth')){
     var tokenToSend = {token: sessionStorage.getItem('user-auth')}
    var regJSONED = JSON.stringify(tokenToSend)

    fetch('http://localhost:4000/users/token', {
        method: 'POST',
        headers:{
            "Content-Type": "application/json"
        },
        body:  regJSONED,

    }).then(response => {
        if (!response.ok) {
            throw new Error("HTTP error " + response.status);
        }
        return response.text(); 
    })
    .then(data => {
   let JsonedUserName = JSON.parse(data)
   this.setStateUserName(JsonedUserName.name)

    })

    return <UserHeader name ={this.state.userName}/>

} else if(!sessionStorage.getItem('user-auth')){
return   <Link to="/login"> <LoginLink /> </Link>
}
}

如您所见，只有在会话存储中存在“ user-auth”时才会显示组件“ UserHeader”，如果不存在“ user-auth”，则将显示组件“ LoginLink”。

每次从会话存储“ LoginLink”中删除“ user-auth”时都会立即显示，而不是“ UserHeader”，但是每次在存储会话中创建“ user-auth”时，我都必须刷新页面，因此可以显示“ UserHeader”而不是“ LoginLink”。

如何在创建“ user-auth”时立即显示“ UserHeader”？我在代码中做错了吗？

Answer 1

您可以执行setInterval来检查会话存储数据是否已更改，最好是使用React Hooks https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects的useEffect

组件不会随着React router dom改变

1 个答案: