ReactでAPIからのhtml応答をレンダリングしようとしています。

問題は、非同期フェッチを正しく処理していないことだと思います。BEからフェッチしているhtml文字列がpromiseなのか文字列なのかわかりません。以下にログを記録すると、Promise

この回答のコードを使用dangerouslySetInnerHTMLしてhtmlをレンダリングしましたが、これが完全なページをレンダリングする正しい方法であるかどうかはわかりません。backendHtmlStringは、Reactに追加したい完全なページです。

App.js-HTMLをレンダリングするためのReactコード:

async function createMarkup() {
  let response;
  response = await fetch(`http://localhost:8000/backed_api/html_response/?user_email=chriss%40comtura.ai`)
  const backendHtmlString = response.text()

  console.log(backendHtmlString)
  return {__html: backendHtmlString};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

function App() {
  return (
    <div className="App">
      <MyComponent/>
    </div>
  );
}

export default App;

Index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
応答

非同期関数は常に!を返しPromiseます データを取得するには、必ず解決してください。

参照:https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

データはバックエンドからフェッチされるため、時間がかかる場合があります。を使用useEffectしてリクエストを作成し、を使用してサーバーから取得した値を設定できますuseState

function MyComponent() {
    
      const [html, setHTML] = useState({__html: ""});
    
      useEffect(() => {
        async function createMarkup() {
          let response;
          response = await fetch(`http://localhost:8000/backed_api/html_response/?user_email=chriss%40comtura.ai`)
           const backendHtmlString = await response.text()
    
           console.log(backendHtmlString)
            return {__html: backendHtmlString};
         }
         createMarkup().then(result => setHTML(result));
      }, []);
      
    
      return <div dangerouslySetInnerHTML={html} />;
    }

また、このシナリオを確認してください。それはあなたと同じような別のケースかもしれません。