如何在组件外部访问React Context?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在组件外部访问React Context?相关的知识,希望对你有一定的参考价值。
我正在尝试实现一个通过功能性React组件中的按钮调用的函数。
应该从我自己的数据库中删除用户。但是我需要来自Firebase的访问令牌才能对此后端进行受保护的API调用。
现在,我正在通过Context API提供firebase实例,但似乎无法找到从React Component外部访问该实例的方法。
我遇到此错误:
第10行:预期分配或函数调用,而是看到一个表达式
我是用错误的方式进行这种处理吗?
import React from 'react';
import axios from 'axios';
import { PasswordForgetForm } from '../PasswordForgetForm/PasswordForgetForm';
import PasswordChangeForm from '../PasswordChangeForm/PasswordChangeForm';
import { AuthUserContext, withAuthorization } from '../../services/Session';
import { FirebaseContext } from '../../services/Firebase';
const deletUser = (authUser) => {
{
firebase => {
const token = firebase.doGetIdToken();
console.log(token);
axios.delete('/api/users/' + authUser.uid, {
headers: {
authorization: `Bearer ${token}`
}
})
.then(res => {
//this.props.history.push('/dashboard');
console.log(res);
})
}
}
}
const AccountPage = () => (
<AuthUserContext.Consumer>
{authUser => (
<div>
<h1>Account: {authUser.email}</h1>
<PasswordForgetForm />
<PasswordChangeForm />
<button type="button" onClick={() => deletUser(authUser)}>Delete Account</button>
</div>
)}
</AuthUserContext.Consumer>
);
const condition = authUser => !!authUser;
export default withAuthorization(condition)(AccountPage);
感谢您的帮助!
答案
代码声明一个匿名对象,内部语法不正确
const deletUser = (authUser) => {
{//anonymous object
firebase => {//There is no key for the member of the object
const token = firebase.doGetIdToken();
console.log(token);
axios.delete('/api/users/' + authUser.uid, {
headers: {
authorization: `Bearer ${token}`
}
})
.then(res => {
//this.props.history.push('/dashboard');
console.log(res);
})
}
}//You never call or return anything of your object
}
以上是关于如何在组件外部访问React Context?的主要内容,如果未能解决你的问题,请参考以下文章
使用 react-router-dom,如何从 React 组件外部访问浏览器历史对象?