Ререндеринг при изменении глобальной переменной

Я хочу перерисовать свой компонент при изменении глобальной переменной. Мой код теперь выглядит так

window.loading = true;

setTimeout(() => {
  window.loading = false;
}, 4000);

class MyComponent extends React.Component {
  state = { rerender: window.loading }

  render() {
    return (
      <h1>{`Loading: ${this.state.rerender}`}</h1>
    )
  }
}

Но ничего не происходит, хотя я вижу, что обновление window.loading в консоли.

Вам удалось это решить?

— 21.08.2020 17:30

reactjs

06.02.2019 13:44

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

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

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

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

5 839

Ответы 3

Если вы хотите, чтобы ваш компонент повторно отображался после изменения глобального свойства, вы должны использовать Promise, RxJS или любой другой шаблон, подобный Observer.

где-то в коде:

window.loading = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve();
  }, 300);
});

в вашем компоненте:

class MyComponent extends React.Component {

  state = { isLoaded: false }

  componentDidMount() {
   window.loading.then(() => 
     this.setState({isLoaded: true})
   )
  }


  render() {
    const {isLoaded} = this.state;
    return (
      ...
    )
  }
}

Таким образом, вы можете повторно визуализировать свой компонент после изменения (разрешения) какого-либо глобального свойства. Ключ в том, чтобы использовать Promise вместо логического примитива.

надеюсь, это поможет

06.02.2019 14:01

Вы должны передать глобальную переменную в качестве реквизита для вашего компонента. В настоящее время ваше состояние не обновляется, поэтому оно не перерисовывается.

class MyComponent extends React.Component {

constructor(props) {
super(props);
}

render() {
return ( <h1>{`Loading: ${this.props.rerender}`}</h1>)
}
}

И когда компонент создан, передайте его как реквизит:

 <MyComponent rerender = {window.loading }

06.02.2019 14:06

Я использую React Hooks

const ChildComponent = ({ fuse }) => {
  const [legalText, setLegalText] = useState([]);

  window.loading = () => {
    setLegalText(JSON.parse(sessionStorage.getItem('legal')));
  };
}

Мы создали глобальную функцию внутри ChildComponent. Все, что вам нужно сделать, это вызвать window.loading в любом месте приложения, и эта функция сработает.

Обязательно используйте redux, mobX или контекстный API. Есть крайние случаи, когда это удобно

14.10.2019 18:41