React fetch не отображает данные ответа на componentDidMount - PullRequest
0 голосов
/ 15 мая 2019

Действительно застрял с этим.
Fetch получает данные JSON API REST от Django и отлично работает на компьютере. Но он ничего не загружает на мобильные устройства и планшеты, за одним исключением, и по какой-то странной причине он работает на моем телефоне только в Chrome. Другие телефоны и планшеты с Chrome не работают. Код выглядит следующим образом:

import React, { Component } from "react";
import cookie from "react-cookies";
import "whatwg-fetch";
import Food from "./Food";
import { Link } from "react-router-dom";
import logo from "../images/db_logo_must.webp";
import burger from "../images/burger.svg";

class Desserts extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      menu: [],
      elClass: false
    };
  }
  loadMenu() {
    let endpoint = "/menu/food/";
    const csrfToken = cookie.load("csrftoken");
    let thisComp = this;
    if (csrfToken !== undefined) {
      let lookupOptions = {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        }
      };
      fetch(endpoint, lookupOptions)
        .then(function(response) {
          return response.json();
        })
        .then(function(responseData) {
          console.log(responseData);
          thisComp.setState({
            menu: responseData
          });
        })
        .catch(function(error) {
          console.log("error", error);
        });
    }
  }
  componentDidMount() {
    this.setState({
      menu: []
    });
    this.loadMenu();
  }
  handleClick() {
    this.setState({
      elClass: !this.state.elClass
    });
  }
  render() {
    const { elClass } = this.state;
    const { menu } = this.state;
    return (
      <div>
        <aside>
          <img className="logo" src={logo} alt="" />

          <img
            onClick={this.handleClick}
            className="burger"
            src={burger}
            alt=""
          />
        </aside>
        <nav className="mobile">
          <ul className={this.state.elClass ? "active" : ""}>
            <li>
              <h2>Menüü</h2>
            </li>
            <li>
              <Link className="subMenu" to="/food/burgers/">
                Burgerid
              </Link>
            </li>
            <li>
              <Link className="subMenu" to="/food/nonburgers/">
                Mitte Burgerid
              </Link>
            </li>
            <li>
              <Link className="subMenu" to="/food/snacks/">
                Snäkid
              </Link>
            </li>
            <li>
              <Link className="subMenu" to="/food/dessert/">
                Magus
              </Link>
            </li>
            <li>
              <Link to="/drinks/">Joogid</Link>
            </li>
            <li>
              <Link to="/about/">Meist</Link>
            </li>
          </ul>
        </nav>
        <Food />
        <main>
          <h1 className="menuHeading">Magusad ampsud</h1>
          <div>
            {menu.length > 0 ? (
              menu.map((menuItem, index) => {
                if (menuItem.category_name === "Magusad ampsud") {
                  return (
                    <div className="menuItem">
                      <p className="menuItemColor">
                        {menuItem.name}
                        <br />
                        {menuItem.price} €
                      </p>
                      <p className="menuIngredients">{menuItem.ingredients}</p>
                    </div>
                  );
                }
              })
            ) : (
              <p className="loading">Laen menüüd...</p>
            )}
          </div>
        </main>
      </div>
    );
  }
}
export default Desserts;

Есть ли способ проверить ответ на мобильных устройствах или есть другое решение?
Имеет бэкэнд django и подается с nginx и gunicorn, если это помогает в качестве дополнительной информации

Спасибо заранее, RAIDar

Обновление!

Кажется, что componentDidMount не вызывается на мобильном телефоне. Как только я захожу в админку django и возвращаюсь на сайт, запускается componentDidMount и данные загружаются. Все еще не знаю, что вызывает это.

Обновление 2

Кажется, componentDidMount вообще не запускается за пределами моей локальной сети, независимо от устройства. Как только я вручную перехожу к django admin / admin или к моей конечной точке api в браузере и возвращаюсь, componentDidMount будет вызываться с load loadPosts (). Что мне не хватает? Почему componentDidMount не вызывается?

...