Блог

Главная - Вопросы по программированию - Страница браузера не обновляется автоматически в проекте react

Страница браузера не обновляется автоматически в проекте react

#javascript #reactjs #visual-studio-code

Вопрос:

 import React from "react";
import "./App.css";

function SecretComponent() {
  return <p>Secret2 information for authorised users only </p>;
}

function RegularComponent() {
  return <p>Everyone1 can see this component</p>;
}

function App(props) {
  if (props.authorized) {
    return <SecretComponent />;
  } else {
    return <RegularComponent />;
  }
}

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App authorized={false} />, document.getElementById("root"));

В моем проекте react в коде Visual Studio при внесении изменений страница браузера обновляется только в том случае, если в App.js файл, но не обновляется при внесении изменений в index.js файл. Мне нужно обновить страницу вручную, чтобы отобразить изменения.

Комментарии:

1. Можете ли вы поделиться примером РЕПО ?

2. ты пользуешься create-react-app ?

3. npx create-react-app <app-name> и я запускаю его с npm start

4. Когда я меняю значение, authorized={true} я заметил, что это изменение не распространяется на компоненты Bowser dev. Авторизованный по-прежнему отображается authorised: false , пока я не обновлю браузер. После обновления страницы значение синхронизируется с базой кода.

Ответ №1:

Попробуй это:

  1. установка npm react-hot-loader
  2. Заходи app.js , добавляй import { hot } from 'react-hot-loader/root' .
  3. Оберните App компонент при экспорте export default hot(App) следующим образом.

Комментарии:

1. Я попробовал. Это не имеет никакого значения.

2. Эта проблема была открыта в github , посмотрите, может ли это вам помочь . Автоматическая перезагрузка не обнаруживает изменений в index.js

Метки: