Question

真的迷上了这个。
Fetch获取Django REST API json数据，并在桌面上运行良好。但是，它没有在移动设备和平板电脑上加载任何内容，只有一个例外，这是出于某种奇怪的原因，它只能在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;

是否可以检查移动设备上的响应是什么，或者是否有其他解决方案？
Is具有django后端，并与nginx和gunicorn一起使用（如果有帮助的话，则可以提供其他信息）

预先感谢，赖达

更新！

似乎没有在移动设备上调用componentDidMount。一旦我访问django后端管理员并返回站点，componentDidMount就会启动并且正在加载数据。仍然不知道是什么原因造成的。

更新2

无论设备如何，componentDidMount似乎都无法在本地局域网之外触发。一旦我手动在浏览器上转到django admin / admin或我的api端点并返回，则将使用load loadPosts（）调用componentDidMount。我想念什么？为什么未调用componentDidMount？

反应获取未在componentDidMount上呈现响应数据

0 个答案: