ComponentDidMount () не работает для всего моего приложения. Это один из многих компонентов, результаты которых не отображаются на моей странице

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';


class Signout extends Component {

  componentDidMount() {
    this.props.signout();
  }
  render() {
    return <div>
      Sorry to see you go
    </div>
  }
};

export default connect(null, actions)(Signout);

Это не отображает страницу, чтобы показать, что вы ушли. Когда я нажимаю ссылку на этот компонент, я получаю пустую пустую страницу. То же самое происходит и с некоторыми другими моими компонентами. В приложении работают только компоненты, которым ничего не нужно от функции ComponenDidMount.

Компонент вызывается отсюда:

import Dashboard from "../views/Dashboard/Dashboard.jsx";
import TagTable from "../views/TagTable/TagTable.jsx";
// @material-ui/icons
import DashboardIcon from "@material-ui/icons/Dashboard";
import Apps from "@material-ui/icons/Apps";
import SignOut from "../views/Auth/Signout";


var dashRoutes = [
  {
    path: "/dashboard",
    name: "Dashboard",
    icon: DashboardIcon,
    component: Dashboard
  },
  {
    path: "/tags",
    name: "Tags",
    icon: Apps,
    component: TagTable
  },

  {
    path: "/logout",
    name: "Logout",
    icon: Apps,
    component: SignOut
  },

  { redirect: true, path: "/", pathTo: "/dashboard", name: "Dashboard" }
];
export default dashRoutes;

Призыв к действию выглядит следующим образом:

export const signout = () => {
  localStorage.removeItem('token');

  return {
    type: AUTH_USER,
    payload: ''
  };
}

В консоли есть ошибки?

Naftali aka Neal 24.07.2018 21:48

Не могли бы вы рассказать, как реализован signout? и компонент, показывающий ссылку, запускающую создателя действия?

dance2die 24.07.2018 21:48

Никаких ошибок в консоли это крайне странно.

Harout Simonian 24.07.2018 22:12

Сообщите мне, если я упустил что-нибудь, что вам нужно проверить.

Harout Simonian 24.07.2018 22:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
4
85
2

Ответы 2

Попробуй сделать это.

 return (
    <div>
       Sorry to see you go
    </div>
)

Заключите ваши div в круглые скобки.

Не сработало, но я получил предупреждение: ./src/views/Auth/Signout.js Строка 13: Ожидалось присвоение или вызов функции, но вместо этого я увидел выражение no-unused-expressions Строка 13: Недостижимый код no-unreachable

Harout Simonian 24.07.2018 22:43

Хм! Поместите текст внутри тегов h1 или p вместо div.

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