(React Context API, React Native Expo): вызов предоставляемой контекстом функции в компоненте Consumer. - PullRequest
0 голосов
/ 20 октября 2018

Так что я ничего не получаю при попытке вызвать функцию изменения состояния, которую я предоставил компоненту 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>
    );
  }
}

Это сводит меня с ума, и я искренне пыталсявсе, что я могу придумать.Есть идеи?Извините, если я опубликовал слишком много кода - я новичок в этом!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...