在 Django 上渲染一個使用的 API 到 React 前端

Question

我在 Django 上使用了 API，沒有 Model。 它在 django Z4C4AD5FCA2E7A3F74DBB1CED00381AA4 頁面上正確顯示 API 結果為 JSON：

現在，如何在反應前端與其他反應組件一起呈現它。

這是 Dashboard.JS 中的代碼

import React, { useEffect, useState } from 'react';

import Wallet from '../wallet/Wallet';
import withWalletLoading from '../wallet/WithWalletLoading';
import '../../App.css';
import DashboardAPI from './DashboardAPI'
import Pricing from '../Pricing'

function Dashboard() {
  
  const WalletLoading = withWalletLoading(Wallet);
  const [appState, setAppState] = useState({
    loading: false,
    ngn_balance: null,
  });

  useEffect(() => {
    setAppState({ loading: true });
    const apiUrl = 'wallet/ngn/?format=json';
    fetch(apiUrl)
      .then((res) => res.json())
      .then((ngn_balance) => {
        setAppState({ loading: false, ngn_balance: ngn_balance });
      });
  }, [setAppState]);

  return (
    <>
    <WalletLoading isLoading={appState.loading} ngn_balance={appState.ngn_balance} />
     <Pricing />
    </>
  );
}

export default Dashboard;

即使我使用完整的 url: http://127.0.0.1:8000/wallet/ngn/?format=json 。 注意，每當我訪問反應頁面時，我都會在命令行上獲得狀態代碼 200。正在調用代碼的反應頁面將正確顯示，然后當頁面上的 API 調用加載時變為空白，而不會在反應頁面，甚至在空白之前和之后都在命令行上只是'“/wallet/ngn”'200

wallet.js 代碼

import React from 'react';

const Wallet = (props) => {
  const { ngn_balance } = props;
  if (!ngn_balance || ngn_balance.length === 0) return <p>No Data, sorry</p>;
  return (
    <ul>
      <h2 className='list-head'>Available NGN balance</h2>
      {ngn_balance.map((ngn_balances) => {
        return (
          <li>
            <span >{ngn_balances.data} </span>
            <span >{ngn_balances.status}</span>
         
          </li>
        );
      })}
    </ul>
  );
};
export default Wallet;

Answer 1

好的。 我終於自己得到了解決方案。 我從后端和前端刪除了 afterremoving.json() 。

.then((res) => res.json()) //react
ngn_balance = response.json() //django

我再次運行服務器，然后 this = <h2 className='list-head'>Available NGN balance</h2>顯示在頁面上。 然后我改變了這個=

 <span >{ngn_balances.data} </span>
 <span >{ngn_balances.status}</span>

對此=

<span >{ngn_balances} </span> 

它移位了。