0

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

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

模态根据 的状态打开或关闭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，它似乎使用了一些混合路由 rails/react 路由系统，但我对它不太熟悉，如果我不这样做，现在不想进入那个兔子洞必须。

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

4

1 回答 1

0

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

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

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

提示

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

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

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

确实，甚至this.setState({modalIsOpen: true})可以删除（通过仅在状态中保存列表 idx，'-1' 用于关闭）但是代码的可读性可能会降低（存储额外的指针很便宜）。

于 2018-09-02T09:09:16.440 回答