Старый компонент сохраняет состояние на кнопке возврата - PullRequest
Новая
       6

Старый компонент сохраняет состояние на кнопке возврата

0 голосов
/ 01 сентября 2018

У меня есть ссылка в модале, которая ведет на новую страницу, и я не могу сбросить состояние компонента с модальным при перенаправлении на эту страницу.

Компонент с модалом, кажется, сохраняет свое состояние после перехода на новую страницу, потому что, когда я нажимаю кнопку "Назад", он автоматически открывает модал.

Модал открывается или закрывается в зависимости от состояния modalIsOpen.

Итак, у меня есть упрощенный Listings компонент: 

import React from 'react'
import ListingModalContent from '../ListingModalContent'
import Modal from '../Modal'

export default class Listings extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      modalIsOpen: false,
      modalContent: null
    }
  }

  modalClick = (e, listing) => {
    e.preventDefault()
    this.setState({
      modalContent: <ListingModalContent listing={listing}/>
    }, () => {
      this.setState({modalIsOpen: true})
    })
  }

  modalClose = () => {
    this.setState({modalIsOpen: false})
  }

  componentWillMount() {
    this.setState({modalIsOpen: false})
    console.log('mounting...')
    console.log(this.state.modalIsOpen)
  }

  componentWillUnmount() {
    console.log('unmounting...')

    this.setState({
      modalIsOpen: false
    }, () => {
      console.log('got here...')
      console.log(this.state.modalIsOpen)
    })

    console.log(this.state.modalIsOpen)
  }

  render() {

    const listings = this.props.listings.map(listing => (<div className="listing">
      <a href="#" onClick={e => this.modalClick(e, listing)}>More Details</a>
    </div>))

    return (<div id="listings">
      <section className="listings">
        {listings}
        <Modal visible={this.state.modalIsOpen} onClose={this.modalClose}>
          {this.state.modalContent}
        </Modal>
      </section>
    </div>)
  }
}

И мой ListingsModalContent компонент: 

import React from 'react'

export default class ListingModalContent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    const {listing} = this.props

    return (<div className="listing-modal">
      <div className="details">
        <h2 className="address">{listing.address}</h2>
        <p className="description">{listing.description}</p>
      </div>
      <div className="btn-container">
        <a href={`/listings/${listing.slug}`} onClick={this.props.modalClose}>View Full Listing</a>
      </div>
    </div>)
  }
}

Консольный вывод ... 

// after initially mounting:
mounting...
false

// after clicking the listing link:
unmounting...
true

// after hitting the back button:
mounting...
false

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

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

Итак, мой вопрос: если это ожидаемое поведение жизненного цикла компонента реагирования, могу ли я обеспечить сброс состояния modalIsOpen перед размонтированием? Или есть способ, которым я могу убедиться, что мое состояние возвращается в исходное состояние при возвращении? Или это скорее следствие системы маршрутизации, которую я использую?

1 Ответ

0 голосов
/ 02 сентября 2018

Это странное, неожиданное поведение в реакции , и оно, безусловно, вызвано не реакцией (как говорилось в @azium), а некоторыми «вещами вокруг», возможно, реакцией response_on_rails (или «функцией»). Сообщить об ошибке / создать проблему на github.

Как вы видите в журнале состояние имеет правильное значение при монтировании, и нет причин для визуализации модальных. «Нормальная» реакция будет работать как положено.

Нет смысла устанавливать состояние на unmount - экземпляр компонента будет уничтожен, его состояние тоже.

НАМЕКАЕТ

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

После установки состояния this.setState({modalIsOpen: true, modalContent:listing}) в обработчике кликов вы можете использовать условный рендеринг (при рендеринге): 

{this.state.modalIsOpen && <ListingModalContent listing={this.state.modalContent}/>}

Чтобы быть правдой, даже this.setState({modalIsOpen: true}) можно удалить (сохраняя только перечисление idx в состоянии, '-1' для закрытия), но тогда код может быть менее читабельным (хранение дополнительного указателя стоит дешево).

...