javascript - React-Modal "Cannot Read Property of State of Null"错误

Question

我正在构建一个react-redux应用程序，在生成引文后，用户可以选择将引文保存到单独的列表中。我从“react-modal”导入 Modal，然后将有关引文的信息发送到商店。然后它成功地将我重定向到引文列表。但是，如果我在触发模态之前添加另一个引文并单击其中一个标题按钮(一个返回首页，另一个进入引文列表)，则会出现错误“无法读取属性”空状态。”如果我删除模态，那么我不会收到错误，所以我知道它与模态相关。任何帮助将不胜感激。相关代码如下:

<SaveModal
  fullCitation={this.state.fullCitation}
  saveCitation={this.state.saveCitation}
  handleClearSaveCitation={this.handleClearSaveCitation}
  history={this.props.history}
  createdAt={this.state.createdAt}
  type={this.state.type} 
  note={this.state.note}
  dispatch={this.props.dispatch}
  handleAddType={this.handleAddType}
  handleAddNote={this.handleAddNote}
/>

import React from 'react';
import Modal from 'react-modal';
import { connect } from 'react-redux';
import { addCitation } from '../actions/citations';

const SaveModal = (props) => (
  <Modal
    isOpen={props.saveCitation}
    onRequestClose={props.handleClearSaveCitation}
    contentLabel="SaveModal"
    closeTimeoutMS={200}
    className="modal"
  >
    <h3>{props.fullCitation}</h3>
    <h3>{props.createdAt}</h3>
    <input 
      autoFocus 
      className="text-input" 
      type="text" 
      id="type" 
      placeholder="Add Type (Optional)"
      onChange={props.handleAddType}
    />
    <textarea
      id="textarea"
      className="text-input" 
      placeholder="Add Note (Optional)"
      onChange={props.handleAddNote}
    >
    </textarea>
    <button 
      className="button"
      onClick={() => {
        props.dispatch(addCitation({ 
          fullCitation: props.fullCitation, 
          createdAt: props.createdAt, 
          type: props.type, 
          note: props.note 
        }));
        props.history.push('/CitationList');
      }}
    >Save</button>
  </Modal>
);

export default connect()(SaveModal);

更新:

状态在父组件中定义，然后传递给 Modal。接下来是一系列方法，用于在将状态传递给子组件(例如 AddParties)之前对其进行操作。

import React from 'react';
import term from '../term';
import AddParties from '../components/AddParties';
import AddOhioVolume from '../components/AddOhioVolume';
import AddRegionalVolume from '../components/AddRegionalVolume';
import AddYear from '../components/AddYear';
import AddPinpoint from '../components/AddPinpoint';
import AddWebcite from '../components/AddWebcite';
import CiteCase from '../components/CiteCase';
import Citation from '../components/Citation';
import RemoveCitation from '../components/RemoveCitation';
import CopyCitation from '../components/CopyCitation';
import SaveCitation from '../components/SaveCitation';
import moment from 'moment';
import SaveModal from '../components/SaveModal';


export default class SupremePost extends React.Component {
  state = {
    partyOne: "",
    partyTwo: "", 
    ohioVolume: "",
    ohioReporter: "",
    ohioFirstPage: "",
    regionalVolume: "",
    regionalReporter: "",
    regionalFirstPage: "",
    year: "",
    pinpointNumber: "",
    pinpointDisplay: "",
    webcite: "",
    parties: "",
    citation: "",
    fullCitation: "",
    createdAt: "",
    saveCitation: false,
    type: "None",
    note: "None"
  };

Answer 1

显然，我使用的是过时版本的react-modal。我更新了它，现在没有其他问题了。