Я создаю реактивное приложение, в котором после генерации цитаты у пользователя есть возможность сохранить цитату в отдельном списке.Я импортирую Модал из 'Reaction-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);
ОБНОВЛЕНИЕ:
Состояние определяется в родительском компоненте и затем передается в модальное состояние.Далее следует несколько методов, которые манипулируют состоянием перед его передачей дочерним компонентам, таким как 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"
};