Django rest框架,前端带有react-空白页

我的电脑上有这个密码 App.js :

import React, { Component } from 'react';
import axios from "axios";
import './App.css';

class App extends Component {
  state = {
  inventory: []
 };

async componentDidMount() {
try {
  const res = await fetch('http://localhost:8000/items/');
  const inventory = await res.json();
  this.setState({
    inventory
  });
} catch (e) {
  console.log(e);
 }
}

render() {
 return (
  <div>
    {this.state.inventory.map(item => (
      //<div key={item.url}>
      <div className="App">
        <h1>{item.name}</h1>
        <span>{item.url}</span>
        <span>{item.price}</span>
        <span>{item.scalable}</span>
        <span>{item.taxable}</span>
      </div>
    ))}
  </div>
  );
 }
}

export default App;

我用的是django react-framework ,我想通过框架从react前端到django后端进行通信。

所以 inventory 是django应用程序的名称。在我的电脑上注册的 settings.py 归档为 库存 .

当然,它有一个模型,这个模型的一个类是 item ,在我的django后端api上 url 定义为 items .像这样 router.register(r'items', ItemViewSet) .

这就像是数据库中所有产品的列表。典型的rest框架视图集。

而且,这些都是序列化的,如果我访问 http://localhost:8000/items/ 它可以工作,但问题是前端,它只显示一个空白页。

我的索引。js尚未编辑,我已安装 axios 图书馆,补充道 "proxy": "http://localhost:8000", 我的电话线 packages.json 文件

还增加了 corsheaders 应用在我的设置中。py文件,我也在上面声明了:

CORS_ORIGIN_WHITELIST = (
 'localhost:3000/'
)

但是,它仍然只显示react前端(App.js)的一个空白页面。

我不知道原因是什么,如果您需要进一步的代码或解释,请告诉我。