web-dev-qa-db-ja.com

プログラムでReactコンテキストを変更するには？

ログインしたユーザーに関するデータを保持するために、新しいReact=コンテキストを使用しようとしています。

それを行うには、LoggedUserContext.js:というファイルにコンテキストを作成します

import React from 'react';


export const LoggedUserContext = React.createContext(
  );

そして確かに、今ここで私がするように、コンシューマーを使用して他のコンポーネントの上記コンテキストにアクセスできます：

  <LoggedUserContext.Consumer>
       {user => (
       (LoggedUserContext.name) ? LoggedUserContext.name : 'Choose a user or create one';
       )}
   </LoggedUserContext.Consumer>

しかし、明らかに、このシステムが役立つためには、ログイン後にコンテキストを変更して、ユーザーのデータを保持できるようにする必要があります。 axiosを使用してREST APIを呼び出しています。取得したデータを自分のコンテキストに割り当てる必要があります。

axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { /*What should I do here?*/});

Reactのドキュメントにはそれを行う方法はありませんが、ログインしたユーザーの情報を保持することは、コンテキストについて考えていたユースケースの1つであるとさえ言及しています：

コンテキストは、Reactコンポーネント、現在の認証済みユーザーなど、テーマ、または優先言語のツリーに対して「グローバル」と見なせるデータを共有するように設計されています。たとえば、次のコードでは、Buttonコンポーネントのスタイルを設定するために、「テーマ」プロップを手動で処理します。

どうすればそれができますか？

javascriptreactjsloginreact-context
8
kace91

Contextを使用するには、値を取るProviderが必要です。その値はコンポーネントの状態から取得され、更新される可能性があります

例えば

class App extends React.Component {
   state = {
      isAuth: false;
   }
   componentDidMount() {
      APIcall().then((res) => { this.setState({isAuth: res}) // update isAuth })
   }
   render() {
       <LoggedUserContext.Provider value={this.state.isAuth}>
           <Child />
       </LoggedUserContext.Provider>
   }
}

ダイナミックコンテキスト に関するセクションで説明しています

13
Shubham Khatri

プロバイダーコンポーネントで消費コンポーネントをラップします。

import React from 'react';

const SERVER_URL = 'http://some_url.com';

const LoggedUserContext = React.createContext();

class App extends React.Component {
    state = {
        user: null,
        id: 123
    }
    componentDidMount() {
        axios.get(`${SERVER_URL}/users/${this.state.id}`).then(response => { 
            const user = response.data.user; // I can only guess here
            this.setState({user});
        });
    }
    render() {
        return (
            <LoggedUserContext.Provider value={this.state.user}>
                <LoggedUserContext.Consumer>
                    {user => (
                        (user.name) ? user.name : 'Choose a user or create one';
                    )}
                </LoggedUserContext.Consumer>
            </LoggedUserContext.Provider>
        );
    }
}

私はそれをさらに明確にするために完全な例を示しました（テストされていません）。より良いコンポーネント構成の例については、 ドキュメント を参照してください。

3
Hinrich