Как переместить переменные Moment в состояние из рендера - PullRequest
Новая
       14

Как переместить переменные Moment в состояние из рендера

1 голос
/ 31 мая 2019

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

Я уже пытался просто объявить переменные в конструкторе ниже setState, но эти переменные нельзя изменить.Затем я попытался сохранить переменные в состоянии как пары ключ-значение, но поскольку одно из значений зависит от другого, оно не сработало.

Вот мой текущий конструктор: 

constructor(props) {
super(props);
this.state = {
  scooter: props.scooter,
  header: props.header,
  reservation: ""
};
}


componentWillReceiveProps(nextProps) {
this.setState({
  scooter: nextProps.scooter,
  header: nextProps.header
});
}

Некоторые элементы нужно будет также вызывать в componentsWillRecieveProps, так как элемент будет меняться при следующих свойствах.

переменныениже 

render() {
const reservation = this.state.scooter.state.LastAdminReservation;
var a = moment();
const c = moment(reservation.PendingDate);
const d = moment(reservation.EndDate);
const duration = d.from(c, true);
var timeSince = a.from(d, true);
const date = moment(reservation.DownloadAckDate).format("DD.MM.YYYY 
HH:mm");

Я хотел бы иметь возможность вызывать эти переменные в моем возвращении и иметь возможность обновлять var a и var timeSince на следующих реквизитах, не сохраняя их в моем рендере, так как это плохая практика,Спасибо!

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

Старайтесь изо всех сил не выводить состояние из реквизита .Однако, если вам действительно нужно, getDerivedStateFromProps - более безопасный метод, представленный в React 16.

componentWillReceiveProps - устаревший метод, который вам следует избегать.

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

Если вы используете решение для управления состоянием, такое как Redux , вы также можете переместить эту логику в селектор и передать только те данные, которые вам нужнываш компонент.

0 голосов
/ 31 мая 2019

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

constructor() {
    super();

    const a = moment();
    const c = moment(new Date());
    const d = moment(new Date());
    const duration = d.from(c, true);
    const timeSince = a.from(d, true);

    this.state = {
      name: 'React',
      timeSince
    };
  }
...