web-dev-qa-db-ja.com

更新Reactコンテキストを使用してREST機能コンポーネントのAPI呼び出し

Reactアプリを使用して、バックエンドのREST APIへのAPI呼び出しから得られたデータを使用しているアプリを更新しようとしています。問題は、関数を同期できません。

私はこのブログ投稿で提案されているこの解決策を試しました https://medium.com/@__davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014 しかし、それは私のために動作しません場合。

これがtextContext.jsのコードです

import React, {useEffect, useState} from "react";
import axios from "axios";

var text = "Test";

fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      text = json;
    })




const TextContext = React.createContext(text);
export const TextProvider = TextContext.Provider;
export const TextConsumer = TextContext.Consumer;

export default TextContext

そして、これは私がコンテキストからデータにアクセスしようとする機能コンポーネントです

import TextProvider, {callTextApi} from "../../../../services/textService/textContext";
function  Profile()
{

  const text = useContext(TextProvider);
  console.log(text);
  const useStyles = makeStyles(theme => ({
    margin: {
      margin: theme.spacing(1)
    }
  }));

ブラウザコンソールのネットワークセクションでデータを取得するフェッチ要求を確認できますが、コンテキストが更新されていません。

TextContext.jsでこれを試してみました。

export async function callTextApi () {
  await fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      return json;
    })
}

そして、私はuseEffect関数を使用してProfile.jsでデータを取得しようとしていました

 const [text, setText] = useState(null);
  useEffect(()=> {
    setText (callTextApi())
  },[])

React.contextを使用するのは初めてで、かなり混乱しています。私は何を間違っているか、何が欠けていますか？

reactjsreact-context
3
Octavian

私が最初に目にするのは、状態を未定義に設定することにつながる、関数内のpromiseを返していないことです。

以下にreturnステートメントを追加しました。

export async function callTextApi () {
  return await fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      return json;
    })
}

また、最後のthen-chainは少しクリーンアップされる可能性があり、promiseを返すときに非同期関数のawaitステートメントを削除できると確信しています。自動的に待機します。

export async function callTextApi () {
  return fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => json)
}

2番目のステップは、useEffectフックを確認することです。 api呼び出しからのpromiseが解決された後、setTextを実行する必要があります。したがって、useEffectのコールバック関数も非同期にする必要があります。

  useEffect(async ()=> {
    const newText = await callTextApi();
    setText (newText);
  },[])

3番目のステップは、コンテキストAPIとuseContextフックを適切に使用する方法を確認することです。 useContextフックはコンテキストをパラメーターとして受け取りますが、ContextProviderを引数として渡しました。

const text = useContext(TextContext);

コンテキストとコンテキストプロバイダーは、Reactの世界では2つの異なるエンティティです。コンテキストは、アプリケーション全体で共有したい状態と機能（グローバル状態など）と考え、 1つのコンテキストを管理し、このコンテキスト状態を子コンポーネントに提供する反応コンポーネントとしてのプロバイダーについて。

return(
<TextContext.Provider value={/* some value */}>
    {children}
</TextContext.Provider>);

これは、プロバイダーコンポーネントのreturnステートメントがどのように見えるかであり、このコードは現在、アプリケーションに存在しないと思います。

0
Andre