Question

我正在构建一个react-redux应用程序，在生成引文之后，用户可以选择将引文保存到单独的列表中。我从“反应模态”导入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。我更新了它，现在没有其他问题了。

反应模态“无法读取空状态的属性”错误

1 个答案: