Блог

Главная - Вопросы по программированию - Не вижу данных из django в интерфейсе reactjs

Не вижу данных из django в интерфейсе reactjs

#reactjs #django

#reactjs #django

Вопрос:

Я новичок в react. И я создаю полный код веб-приложения django react для проекта https://github.com/mascai/django_examples/tree/master/02_django_react

Когда я делаю запрос http://127.0.0.1:8001/api/lead/ , я вижу действительные данные из Django. Но когда я захожу http://127.0.0.1:8001 , я не вижу, не вижу никаких данных.

Я думаю, что проблема со стороны интерфейса.

index.js

 import React, { Component } from 'react';
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  componentDidMount() {
    fetch("api/lead")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        } 
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    return (
      <ul>
        {this.state.data.map(contact => {
          return (
            <li key={contact.id}>
              {contact.name} - {contact.email}
            </li>
          );
        })}
      </ul>
    );
  }
}

export default App;

const container = document.getElementById("app");
render(<App />, container);

index.html (кажется, все в порядке)

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Django REST with React
</head>
<body>
<div id="app">
    <!-- React will load here -->
</div>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>

Ответ №1:

Вы забыли закрывающий тег для заголовка в вашем index.html :

 <title>Django REST with React</title>

и кавычки скрипта должны быть такими (обратите внимание на двойные и одинарные кавычки):

 <script src="{% static 'frontend/main.js' %}"></script>

Другая проблема заключается в том, что когда вы создаете свое приложение React, оно будет размещено внутри static/frontend/main.js/main.js . Таким образом, вы создаете не только файл с именем main.js , но и каталог с именем main.js .

Чтобы исправить это, сначала удалите содержимое static/frontend папки (удалите main.js каталог).

Затем перейдите package.json и измените путь вывода в своих сценариях на

   "scripts": {
    "dev": "webpack --mode development ./src/index.js --output-path ./static/frontend",
    "build": "webpack --mode production ./src/index.js --output-path ./static/frontend"
  },

Я также предлагаю поместить <h1> тег со случайным текстом в ваш компонент, чтобы вы могли видеть, действительно ли ваш компонент отображается.

Наконец, скомпилируйте свое приложение react с помощью одной из двух команд.