web-dev-qa-db-ja.com

React非同期API呼び出しからのコンテキストにデータを設定します

GET APIリクエストを使用して、バックエンドからのデータでカスタムReactコンテキストを初期化しようとしています。ただし、API呼び出しがデータのフェッチを完了する前にコンテキストがロードされます。

私が試したのは、コンシューマーを使用して子コンポーネントにデータを送信することですが、設定されているコンテキストのデフォルト値にしかアクセスできず、コンテキストが作成されます。

これが私が私のコンテキストデータを設定しようとしている方法です

import React, {useState,useEffect} from "react";
import {callAffiliateApi} from "./services/affiliateService/transactionContext";

export const AffiliateContext = React.createContext("Raaaaaaaaaaaa");

export const AffiliateProvider  = ({children}) => {

  const [data, setData] = useState(null);
  useEffect(()=> {
    async function fetchData() {
      const newText = await callAffiliateApi();
      setData(newText)
    };fetchData()
  },[])

  console.log("Data in the context", data);
  if(data != null){
    return (
      <AffiliateContext.Provider value={data}>
        {children}
      </AffiliateContext.Provider>
    )}
  else {
    return (
      <AffiliateContext.Provider value={"Loading..."}>
        {children}
      </AffiliateContext.Provider>)
  }

}

そして、これが私が子コンポーネントでそれにアクセスしようとしている方法です

import {AffiliateContext} from "../../../../AffiliateContext";

class Profile extends Component {


  constructor(props) {
    super(props);
    this.state = {
      text: this.props.text,
      user: this.props.user,

    }

  }

  render() {
    return (
    <AffiliateContext.Consumer>
      {data =>
        <div>
        {data}
      </div>}
    </AffiliateContext.Consumer>
      )
  }
}
export default Profile;

ただし、ページに表示されるのは、コンポーネントのデフォルト値である「Raaaaaaa」だけです。 APIリクエストからのデータのフェッチが完了するまで子コンポーネントを待機させるにはどうすればよいですか？

reactjsrestasynchronoussynchronization
3
Octavian

これはuseAsyncReducerフックの良いユースケースだと思います

import createActions from './createActions';
import useAsyncReducer from '../../hooks/useAsyncReducer';
import reducer, { initialState } from './reducer';

export const CounterContext = React.createContext();

export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useAsyncReducer(reducer, initialState);
  const actions = createActions(dispatch);

  return (
    <CounterContext.Provider value={[state, actions]}>
      {children}
    </CounterContext.Provider>
  );
};

詳細については、こちらの便利な記事をご覧ください。

0
Amber-Williams