旧组件在后退按钮上保留状态

Question

我有一个模式中的链接转到一个新页面，我似乎无法在指向该页面时使用模态重置组件的状态。

具有模态的组件在指向新页面后似乎保持其状态，因为当我点击后退按钮时，它会自动打开模态。

根据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来解决这个问题，但它似乎永远不会在卸载之前完成设置状态。

我正在使用react on rails，它似乎使用了一些混合路由轨道/反应路由系统，但我不太熟悉它，如果我不需要，我现在不想再去那个兔子洞。

所以我的问题是，如果这是反应组件生命周期的预期行为，有没有办法可以确保在卸载之前重置modalIsOpen的状态？或者有一种方法可以确保我的状态在返回时重置为其初始状态？或者这更可能是我正在使用的路由系统的结果？

Answer 1

这是一种奇怪的，意想不到的反应，并且肯定不是由反应引起的（如@azium所述），而是一些“周围的事物”，可能是react_on_rails问题（或“特征”）。在github上报告错误/创建问题。

正如您在日志状态中看到的那样，在安装时具有适当的值，并且没有理由呈现模态。 “正常”反应将按预期工作。

在卸载时设置状态是没有意义的 - 组件的实例也将被销毁，其状态也是如此。

HINTS

您不应该将状态内容存储在状态中。有可能，它适用于简单的情况，它可以用于部分内容的缓存，但是当需要条件重新渲染时（使用prop / state更改），您可能会遇到问题。

在单击处理程序中设置状态this.setState({modalIsOpen: true, modalContent:listing})后，您可以使用条件渲染（在渲染中）：

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

事实上，即使this.setState({modalIsOpen: true})也可以删除（通过仅保存列表中的idx状态，'-1'表示关闭）但是代码可以更不易读（存储额外的指针很便宜）。