Действительно застрял с этим.
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 не вызывается?