Так что я ничего не получаю при попытке вызвать функцию изменения состояния, которую я предоставил компоненту Consumer в моем приложении React Native, работающем на Expo.Вот хранилище контекста:
authContext.js
const initialState = {
auth: {
authenticated: false,
},
mode: {
emergency: false,
},
};
const authContext = React.createContext();
class AuthProvider extends Component {
state = {
...initialState,
setAuth: () => { }
}
render() {
return (
<authContext.Provider value={{ state: this.state }}>
{this.props.children}
</authContext.Provider>
);
}
}
export {
authContext, AuthProvider,
};
Вот файл app.js:
App.js
import { AuthProvider } from './src/ContextStore/authContext';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
...initialState,
setAuth: this.setAuth
};
}
setAuth = (authenticated) => {
this.setState((oldState) => ({
auth: {
...oldState.auth,
authenticated,
},
}));
};
render() {
return (
<AuthProvider>
<Routes />
</AuthProvider>
)
}
}
И это компонент, где вызывается функция setAuth()
.Он должен обновить глобальное состояние до auth { authenticated : true }
... или, по крайней мере, это то, чего я хочу!Это затем перенаправило бы на новую страницу.Но он просто ничего не делает, без ошибок в консоли.
Login.js
import { authContext } from '../../ContextStore/authContext';
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
}
handleSignIn(email, password) {
return login(email, password);
}
render() {
return (
<authContext.Consumer>
{({ state }) => (
<Button
onPress={() => {
this.handleSignIn(this.state.email, this.state.password)
.then((data) => {
if (data) {
const { setAuth } = state;
setAuth(true); // does nothing!
} else {
console.log('incorrect login details');
}
});
}}
text="Sign in"
/>
)}
</authContext.Consumer>
);
}
}
Это сводит меня с ума, и я искренне пыталсявсе, что я могу придумать.Есть идеи?Извините, если я опубликовал слишком много кода - я новичок в этом!