Question

在模态中，当我使用表单数据调度操作时，当我尝试发送操作以关闭模型时，我收到错误

无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是一种反模式，但可以移动到componentWillMount

这是我的提交功能：

   constructor() {
       super();
         this.submitForm = this.submitForm.bind(this);
  }


submitForm(){

let title = ReactDOM.findDOMNode(this.refs.title).selectedOptions[0].label;
let achievementHour = ReactDOM.findDOMNode(this.refs.hourSelect).selectedOptions[0].label
let achievementMin = ReactDOM.findDOMNode(this.refs.minSelect).selectedOptions[0].label
let timeString = achievementHour + ":" + achievementMin;

this.props.onChange(this.props.dayId, title, timeString)
this.props.onClose()

}

我的模态减速器应该关闭我的模态：

import AddEnjoymentModal from './AddEnjoymentModal.js';
import AddAchievementModal from './AddAchievementModal.js';

const MODAL_COMPONENTS = {
  'ADD_ENJOYMENT': AddEnjoymentModal,
  'ADD_ACHIEVEMENT': AddAchievementModal

  /* other modals */
}

const ModalRoot = ({ modalType, modalProps }) => {
  if (!modalType) {
    return <span /> 
  }

  const SpecificModal = MODAL_COMPONENTS[modalType]
  return <SpecificModal {...modalProps} />
}

export default connect(
  state => state.modal
)(ModalRoot)

隐藏模态的行动：

export const hideModal = (modalProps) => ({ type: types.HIDE_MODAL, ...modalProps })

我使用以下方式打开模态：

this.props.showAchievement({
   type: 'SHOW_MODAL',
  modalType: 'ADD_ACHIEVEMENT',
  modalProps: {
  dayId: this.props.day.id,
  onChange: this.props.addAchievement,
  onClose: this.props.hideModal
}
})

模型渲染：

   return (
         <span >
          <ModalWrapper
            onRequestClose={this.props.closeModal}
            style={this.props.customStyles}
            contentLabel="Modal" >

          <h2>Add Achievement</h2>

             <select name="title" ref="title">
               {options.map((option) => (
                      <option value={option.value}>{option.label} </option>
                ))}
            </select>


            <select name="hourSelect" ref="hourSelect">
               {hourSelect.map((option) => (
                      <option value={option.value}>{option.label} </option>
                ))}
            </select>


            <select name="minSelect" ref="minSelect">
               {minSelect.map((option) => (
                      <option value={option.value}>{option.label} </option>
                ))}
            </select>




            <a href="#" onClick={this.submitForm} >Submit</a>

          </ModalWrapper>
      </span>
    )

从表单提交调度操作

0 个答案: