Javascript 在上下文上重新渲染的次数过多

我正在尝试用谷歌对我的应用程序实施firebase身份验证。我使用上下文在屏幕之间共享数据。但我遇到了太多重新渲染的问题

export const UserContext = createContext({user: null});

class UserProvider extends Component {
    constructor() {
        super();
        this.state = {
            user: null,
        };
    }

    componentDidMount = () => {
        auth.onAuthStateChanged((userAuth) => {
            if (!!userAuth) {
                console.log("signed in");
                console.log(userAuth);
                this.setState({user: userAuth});
            } else {
                console.log("not signed in");
            }
        });
    };

    render() {
        return (
            <UserContext.Provider value={this.state.user}>
                {this.props.children}
            </UserContext.Provider>
        );
    }
}

export default UserProvider;

下面是

App.js

const App = () => {
    return (
        <UserProvider>
            <Application />
        </UserProvider>
    );
};

const-App=（）=>{
返回(
);
};

我还使用了

@reach/router

---

我认为这里的问题是因为我在componentDidMount中放入了setState。变量userAuth完全正确。我只是无法将其设置为.state.user

我不知道到底发生了什么，但我的应用程序现在运行良好

export const UserContext = createContext({
    user: null,
});

class UserProvider extends Component {
    constructor() {
        super();
        this.state = {
            user: {},
        };

        // set new user
        this.setUser = (newUser) => {
            this.setState({user: newUser}, () => {
                console.log("new user: ");
                console.log(this.state.user);
            });
        };
    }

    componentDidMount = () => {
        // check if the user has changed and setState to the {user}
        auth.onAuthStateChanged((userAuth) => {
            if (!!userAuth) {
                console.log("signed in");
                this.setUser(userAuth);
            } else {
                console.log("not signed in");
            }
        });
    };

    render() {
        return (
            <UserContext.Provider value={this.state.user}>
                {this.props.children}
            </UserContext.Provider>
        );
    }
}

export default UserProvider;

export const UserContext=createContext({
用户：null，
});
类UserProvider扩展组件{
构造函数（）{
超级（）；
此.state={
用户：{}，
};
//设置新用户
this.setUser=（newUser）=>{
this.setState（{user:newUser}，（）=>{
log（“新用户：”）；
console.log（this.state.user）；
});
};
}
componentDidMount=（）=>{
//检查用户是否已更改，并将状态设置为{user}
auth.onAuthStateChanged（（userAuth）=>{
如果（！！userAuth）{
控制台日志（“登录”）；
this.setUser（userAuth）；
}否则{
控制台日志（“未登录”）；
}
});
};
render（）{
返回(
{this.props.children}
);
}
}
导出默认用户提供者；

---

我调整了一些东西，它成功了！试图弄清楚它

什么时候会调用函数

auth.onAuthStateChanged

？你能在第一个if之前放一个

console.log

，看看调用

auth.onAuthStateChanged

函数的次数吗？@TaghiKhavari

firebase.auth（）.onAuthStateChanged（）

是firebase的一个函数，用于检查登录的用户是否发生了变化。在错误显示之前只调用了一次函数。我认为

this.state.user

每次都返回

user

对象的一个新的

实例，这会导致额外的RERERENDERS。您的意思是
this.state.user
行的
是的。如果值不同，则整个
子项将被重新加载。即使对象看起来相同，也可以是不同的实例
export const UserContext = createContext({
    user: null,
});

class UserProvider extends Component {
    constructor() {
        super();
        this.state = {
            user: {},
        };

        // set new user
        this.setUser = (newUser) => {
            this.setState({user: newUser}, () => {
                console.log("new user: ");
                console.log(this.state.user);
            });
        };
    }

    componentDidMount = () => {
        // check if the user has changed and setState to the {user}
        auth.onAuthStateChanged((userAuth) => {
            if (!!userAuth) {
                console.log("signed in");
                this.setUser(userAuth);
            } else {
                console.log("not signed in");
            }
        });
    };

    render() {
        return (
            <UserContext.Provider value={this.state.user}>
                {this.props.children}
            </UserContext.Provider>
        );
    }
}

export default UserProvider;