Рендеринг ничего не возвращает

Вышеупомянутый запрос был решен, но возникла новая проблема. Я использую materialize.css для использования модального окна и слайдера. Теперь, когда я захожу на страницу администратора, они не работают. Я просто показываю серый экран в ползунке, а модальное окно не активируется. Инициализация js находится в моем index.html, которым я делюсь ниже, и на странице администратора, которая содержит модальный код и код слайдера. index.html-

        <!DOCTYPE html>
         <html lang = "en">

      <head>
       <meta charset = "utf-8">
 <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink- 
 to-fit=no">
   <meta name = "theme-color" content = "#000000">
   <!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See 
 https://developers.google.com/web/fundamentals/engage-and-retain/web-app- 
  manifest/
     -->
    <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">
   <link rel = "shortcut icon" href = "%PUBLIC_URL%/favicon.ico">

  <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel = "stylesheet">
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">


   <title>React App</title>
    </head>

      <body>
    <noscript>
       You need to enable JavaScript to run this app.
     </noscript>


       <div id = "root">

      </div>
       <script type = "text/javascript" src = "https://code.jquery.com/jquery- 
    2.1.1.min.js">

    </script>

      <script type = "text/javascript"src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">

    </script>
 <script>
$(document).ready(function () {
  // the "href " attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $(".sidenav-trigger").sideNav();

  $(".carousel").carousel();
  $(".modal-trigger").leanModal();
  $('.slider').slider({ full_width: true });

})
   </script>
    </body>
   </html>



import React, { Component } from "react";
  import { Link } from "react-router-dom";
  import { withRouter } from "react-router-dom";

   import { connect } from "react-redux";
   import BillForm from "./BillForm";
  import { addBill } from "../actions/Bill";
 import AddBillerForm from "./AddBillerForm";
  import { addBiller } from "../actions/Biller";
   import Image from "../images/main.jpg";
   import Image3 from "../images/Photo3.jpg";
   import Footer from "./Footer";
   import { fetchAdmin, adminLogout } from "../actions/Admin";
    import Slider from "./Slider";

   class AdminPage extends Component {
   constructor(props) {
   super(props);
    }
    componentDidMount() {
  this.props.dispatch(fetchAdmin());
   }
   onLogout() {
this.props.dispatch(adminLogout());
this.props.history.push("/");
   }
   render() {
if (this.props.Admin.length < 1) {
  return <div>No data</div>;
}
if (this.props.Admin.length >= 1) {
  if (!this.props.Admin[0].Login) {
    return <div>Not logged in as admin</div>;
  }
  if (this.props.Admin[0].Login) {
    return (
      <div>
        <nav>
          <div className = "nav-wrapper">
            <Link to = "/adminpage">
              <h3 className = "left brand-logo">Bill Payment</h3>
            </Link>
            <ul className = "right">
              <li>
                <Link className = "btn-small" to = "viewbiller">
                  View Biller
                </Link>
              </li>
              <li>
                <Link className = "btn-small modal-trigger" to = "#modal2">
                  Add Biller
                </Link>
              </li>
              <li>
                <Link className = "btn-small" to = "/generatedbills">
                  Generated Bills List
                </Link>
              </li>

              <li>
                <Link className = "btn-small modal-trigger" to = "#modal1">
                  Generate New Bill
                </Link>
              </li>
              <li>
                <button className = "btn-small btn-flat teal">
                  Top Bill Payments
                </button>
              </li>
              <li>
                <button
                  className = "btn-small btn-flat white-text"
                  onClick = {e => this.onLogout()}
                >
                  Logout
                </button>
              </li>
            </ul>
          </div>
        </nav>
        <div id = "modal1" className = "modal">
          <div className = "modal-content">
            <div>
              <p>Generate New Bill for User</p>
              <BillForm
                onSubmit = {(bill = {}) => {
                  this.props.dispatch(addBill(bill));
                  this.props.history.push("/adminpage");
                }}
              />
            </div>
          </div>
          <div className = "modal-footer red lighten-2">
            <Link
              to = "#!"
              className = " modal-action modal-close waves-effect waves-green 
    btn-flat"
            >
              Close
            </Link>
          </div>
        </div>
        <div id = "modal2" className = "modal">
          <div className = "modal-content">
            <div className = "">
              <div className = "green white-text">
                <h3>Add Biller</h3>
              </div>
              <AddBillerForm
                onSubmit = {(biller = {}) => {
                  this.props.dispatch(addBiller(biller));
                }}
              />
            </div>
          </div>
          <div className = "modal-footer red lighten-2">
            <a
              href = "#!"
              className = " modal-action modal-close waves-effect waves-green 
  btn-flat"
            >
              Close
            </a>
          </div>
        </div>
        <div>
          <Slider />
        </div>
        <Footer />
      </div>
    );
  }
 }
  }
}

   const mapStateToProps = state => {
   return { Admin: state.Admin };
  };
export default withRouter(connect(mapStateToProps)(AdminPage));

node.js reactjs routing materialize

18.05.2018 14:23

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В настоящий момент все ваши операторы возврата находятся в операторах if. React всегда ожидает оператора return при рендеринге. Когда ни один из ваших операторов if не возвращает true, у вас нет оператора return. Вы должны добавить оператор return в конце вашего компонента, который возвращает пустой элемент jsx или значок загрузки.

Попробуйте добавить следующий код в конец вашего метода рендеринга (должна быть строка 127, не на 100%): return <span> ...loading </span>

18.05.2018 14:34

Другие вопросы по теме

React-router-dom и Redux не перерисовали компонент

Я хочу заменить fetch на axios

Как вы относитесь к основному «this» внутри цикла?

Как получить доступ ко всем элементам dom по имени класса в React?

React.js Context API: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов)

Реагировать: содержимое ящика не отображается при изменении состояния

Невозможно прочитать свойство 'date' неопределенного дизайна материала React

Как обновить компонент React / Recompose при изменении свойств?

Несколько экземпляров redux для нескольких приложений реагирования на одной веб-странице

Изменить состояние в реакции в течение 1 секунды без использования метода setTimeout ()

Рендеринг ничего не возвращает

Ответы 1

Другие вопросы по теме

Похожие вопросы