Reactjs在反應模式彈出更改數據後刷新父項

Question

我正在使用反應模式在我的某個組件中設置彈出窗口。我有一個組件呈現一個包含反應模態的div。我的父組件使用isOpen設置爲false來渲染模態組件。單擊父集上的鏈接isOpen爲true，並導致模態彈出窗口打開。

我在打開的彈出窗口中對我的數據進行了更改，然後在關閉按鈕被單擊時保存更改並關閉模型。

我正在使用一個redux來設置處理數據更改和狀態更改的操作和reducers。

概念上，我將如何更新父級以顯示彈出窗口所做的更改？不應該使用操作更改我的數據會導致商店重新生成並更新組件中的數據，還是必須在保存後明確「刷新」我的商店？我的問題是，當彈出窗口關閉時，它並不是在DataView組件上進行任何「刷新」。

組件如下：

DataView組件

import React from 'react'; 
import DataView from './MonthView.js'; 
import DataViewPopup from './MonthViewPopup.js'; 
import { connect } from 'react-redux'; 
import { getAction } from '../actions/actions.js'; 
import { getActionAll } from '../actions/actions.js'; 
import { getPopupData } from '../actions/actions.js'; 

class DataViewContainer extends React.Component { 
    constructor() { 
    super(); 

    this.popupCategory = undefined; 
    this.popupMonth = undefined; 

    this.state = { 
     detailPopup : false, 
     refreshView: false 
    } 

    this.handleAddYear = this.handleAddYear.bind(this); 
    this.handleSubtractYear = this.handleSubtractYear.bind(this); 
    this.handleGetDetail = this.handleGetDetail.bind(this); 

    } 

    componentDidMount() { 
    this.props.getAction(2016); 
    this.props.getActionAll(2016); 
    } 

    render() { 

    return (
     <div className="row"> 
      <div className="col-sm-8"> 
       <MonthView transactions={this.props.storeData.storeData} selectedYear={this.props.storeData.selectedYear} onAddYear={this.handleAddYear} onSubtractYear={this.handleSubtractYear} onHandleGetDetail={this.handleGetDetail} /> 
      </div> 
      <div className="col-sm-4"> 
       <MonthViewPopup modalActive={this.state.detailPopup} transactions={this.props.storePopupData.getPopupData} selectedYear={this.props.storeTransactions.selectedYear} category={this.popupCategory} month={this.popupMonth}/> 
      </div> 
     </div> 
    ) 

    } 

    handleGetDetail(category,month) { 

    console.log("props inside handleGetDetail: ", this.props); 

    this.popupCategory = category; 
    this.popupMonth = month; 
    let popupYear = this.props.storeTransactions.selectedYear 

    this.props.getPopupData(popupYear, month, category); 

    this.setState({ detailPopup: true}, function() {}); 

    } 

} 


const mapStateToProps = (state) => ({ 
    storeData: state.storeData, 
    storePopupData: state.storePopupData, 
    storeDataAll: state.storeDataAll 
}); 

export default connect(mapStateToProps, {getAction,getActionAll,getPopupData})(DataViewContainer); 

DataViewPopup組件

import React from 'react'; 
import Modal from 'react-modal'; 
import { connect } from 'react-redux'; 

import { saveAction } from '../actions/actions.js'; 
import { getActionAll } from '../actions/actions.js'; 

class DataViewPopup extends React.Component { 

    constructor (props) { 
    super(props) 

    this.editedData = new Map(); 

    this.state = { 
     modalIsOpen: false 
    }; 

    this.openModal = this.openModal.bind(this); 
    this.afterOpenModal = this.afterOpenModal.bind(this); 
    this.closeModal = this.closeModal.bind(this); 

    this.renderFilteredTransactions = this.renderFilteredTransactions.bind(this); 

    } 

openModal() { 
    this.setState({modalIsOpen: true}); 
    } 

    afterOpenModal() { 
    console.log("inside afterOpenModal"); 
    } 

    closeModal() { 

    this.props.saveTransactions(this.editedData); 

    this.editedData = new Map(); 

    this.setState({ modalIsOpen: false }, function() {}); 

    } 
    componentWillUnmount() { 

    this.props.getDataAll(); // i tried this but it does not work because the component (modal popup) is still mounted, but just not visible 

    //this.props.refreshParent(); 

    } 


    componentWillReceiveProps(nextProps){ 

    if (nextProps.modalActive === true) { 
     this.openModal(); 
     return; 
     } 

    } 

    render() { 
     return <div> 
      <Modal 
      isOpen={this.state.modalIsOpen} 
      //isOpen={this.modalActive}//not needed as is currently setup 
      onAfterOpen={this.afterOpenModal} 
      onRequestClose={this.closeModal} 
      //style={customStyles} 
      contentLabel="Example Modal" 
      > 

      <button onClick={this.closeModal}>close</button> 

      {this.renderFilteredTransactions(this.props.data,this.props.category,this.props.month)}; 
      </Modal> 
     </div> 
    } 

    renderFilteredTransactions(trans,category,month){ 
     return <div> 
      <table> 
       <tbody className="mo-tblBody"> 
        {trans && trans.map((data,index) => 
         <tr key={data.transid}> 
          <td>{data.transid}</td> 
          <td> 
           {this.renderCategory(data.category,index,data.transid)} 
          </td> 
         </tr> 
        )} 
       </tbody> 
      </table> 
     </div> 

    } 

    handleCategoryChange(value,transIndex,transId){ 

     let trans = JSON.parse(JSON.stringify(this.props.transactions)); 

     //add or updated transaction to this.editedTransactions based on whether or not the transid already exists 
     trans.filter(item => item.transid === transId) 
     .map(item => this.editedData.set(transId, 
        Object.assign({}, item, { category: value }))); 

    } 

} 

const mapStateToProps = (state) => { 
    return {storeDataAll: state.storeDataAll, 
    storeSaveData: state.storeSaveData 
    } 
}; 

export default connect(mapStateToProps, {getDataAll,saveData})(DataViewPopup); 

Answer 1

我在最近的文章中Practical Redux, Part 10: Managing Modals and Context Menus覆蓋這類的問題。

的基本方法是：

• 傳遞一個回調函數作爲道具的模式組件（將工作，但如果你開車從Redux的狀態模式顯示，外放功能進入終極版狀態不鼓勵）
• 創建一個「預建」行動，傳遞，作爲道具的模式，並有模態調度的行動爲「返回值」當它關閉
• 使用中間件像redux-promising-modals到跟蹤打開和關閉模態的動作，並使用返回的promise來處理模態時的「返回值」 s已關閉。