Реактивные данные формы очищаются при выполнении избыточного действия

Question

У меня есть панель инструментов, которая показывает будущие и прошлые уроки. Будущие уроки refre sh каждую минуту. Как правило, состояние не меняется . У меня есть форма обратной связи в файле pastLessons. js. Когда я заполняю данные формы и «Компонент будущих уроков» (futureLessons. js) refre sh, все данные формы очищаются.

Панель инструментов. js

import React, { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import FutureLessons from './futureLessons';
import PastLessons from './pastLessons';

import { getCurrentProfile } from '../../actions/profile';

const Dashboard = ({
  getCurrentProfile,
  auth: { user },
  profile: { profile, loading },
}) => {
  useEffect(
    () => {
      getCurrentProfile();
    },
    [getCurrentProfile]
  );

  return (
    <Fragment>
      <h1 className='large text-primary'>Dashboard</h1>
      <p className='lead'>
        <i className='fas fa-user' /> Welcome {user && user.name}
      </p>
      <Fragment>
        <FutureLessons />
        <PastLessons />
      </Fragment>
    </Fragment>
  );
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile,
});

export default connect(mapStateToProps, { getCurrentProfile })(Dashboard);

pastlessons. js

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import DataTable, { memoize } from 'react-data-table-component'
import { Tab } from 'semantic-ui-react'
import {
  getPastSlots,
  deleteStudentSlot,
  getPastSlotsInitial,
  getFeedbacks
} from '../../actions/index'
import moment from 'moment'
import FeedBackTeacher from './feedBackTeacher'
import { Link } from 'react-router-dom'

const PastLessons = ({
  getPastSlotsInitial,
  studentSlot,
  getPastSlots,
  getFeedbacks,
  user,
  feedbacks
}) => {
  useEffect(() => {
    (async function () {
      try {
        await getPastSlotsInitial()
        await getFeedbacks()
      } catch (e) {
        console.error(e)
      }
    })()
  }, [getPastSlotsInitial, getFeedbacks])

  const columns = memoize(clickHandler => [      
    ...
  ])

  const ExpanableComponent = ({ data }) => (
    <div className='box-sh-2-wh p-1 m'>
      {data.lesson && (   
      <Tab
        className='text-left'
        panes={[
           {
             menuItem: 'Teacher\'s Feedback',
             render: () => (
              <Tab.Pane>
                {feedbacks.find(fb => fb._id === data._id)
                .evaluatedByTeacher ? (
                  <div className='break-word'>
                    <FeedBackTeacher
                    data={feedbacks.find(fb => fb._id === data._id)}
                    />
                  </div>
                ) : null}
               </Tab.Pane>
             )
           }
        ]}
      />
    </div>
  )

  return (
    <div className='box-sh-1-wh mt-3'>
      {(studentSlot &&
      studentSlot.pastSlots &&
      studentSlot.pastSlots.length > 0) && (feedbacks && feedbacks.length>0) ? (
        <DataTable
          title='Previous Lessons'
          data={studentSlot.pastSlots}
          columns={columns()}
          pagination
          dense
          highlightOnHover
          expandableRows
          expandableRowsComponent={<ExpanableComponent />}
          expandOnRowClicked
        />
      ) : null}
    </div>
  )
}

const mapStateToProps = state => ({
  studentSlot: state.studentSlot,
  feedbacks: state.studentSlot.feedbacks,
  user: state.auth.user
})

export default connect(mapStateToProps, {
  getPastSlots,
  deleteStudentSlot,
  getPastSlotsInitial,
  getFeedbacks
})(PastLessons)

FeedbackTeacher. js

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { createTeacherFeedBack } from '../../actions/index'
import { withRouter } from 'react-router-dom'
import { setAlert } from '../../actions/alert'

const FeedBackTeacher = ({ data, createTeacherFeedBack }) => {
  const [formData, setFormData] = useState({
    pronounciation: '',
    vocabulary: '',
    grammarCorrection: '',
    recommendation: '',
    teacherNote: '',
  })

  useEffect(() => {
    data &&
      setFormData({
        pronounciation: !data.pronounciation ? '' : data && data.pronounciation,
        vocabulary: !data.vocabulary ? '' : data && data.vocabulary,
        grammarCorrection: !data.grammarCorrection
          ? ''
          : data && data.grammarCorrection,
        recommendation: !data.recommendation ? '' : data && data.recommendation,
        teacherNote: !data.teacherNote ? '' : data && data.teacherNote,
        // teacher_name: !data.teacher_name ? '' : data.teacher_name
      })
  }, [data])

  const {
    pronounciation,
    vocabulary,
    grammarCorrection,
    recommendation,
    teacherNote
  } = formData

  const onChange = (e, name) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  const onSubmit = e => {
    e.preventDefault()
    const id = data._id
    setFormData({ ...formData, user_name: data.student_name })
    createTeacherFeedBack(formData, id, true)
    setAlert('Thank you for your Feedback', 'success')
  }

  return (
    <div>
      <form className='form text-left evaluation' onSubmit={e => onSubmit(e)}>
        <div>
          <div className='form-group colspan-2'>
            <textarea
              placeholder='Pronounciation'
              name='pronounciation'
              value={pronounciation}
              onChange={e => onChange(e)}
            />
            <small className='form-text'>Pronounciation</small>
          </div>
          <div className='form-group colspan-2'>
            <textarea
              placeholder='Vocabulary'
              name='vocabulary'
              value={vocabulary}
              onChange={e => onChange(e)}
            />
            <small className='form-text'>Vocabulary</small>
          </div>
          <div className='form-group colspan-2'>
            <textarea
              placeholder='Grammar Correction'
              name='grammarCorrection'
              value={grammarCorrection}
              onChange={e => onChange(e)}
            />
            <small className='form-text'>Grammar Correction</small>
          </div>
          <div className='form-group colspan-2'>
            <textarea
              placeholder='Recommendation'
              name='recommendation'
              value={recommendation}
              onChange={e => onChange(e)}
            />
            <small className='form-text'>Recommendation</small>
          </div>
          <div className='form-group colspan-2'>
            <textarea
              placeholder='Teacher Note'
              name='teacherNote'
              value={teacherNote}
              onChange={e => onChange(e)}
            />
            <small className='form-text'>Other Notes</small>
          </div>
          <div></div>
          <input
            type='submit'
            value='Submit'
            className='btn btn-primary my-1'
          />
        </div>
      </form>
    </div>
  )
}

export default connect(null, { createTeacherFeedBack, setAlert })(
  withRouter(FeedBackTeacher)
)

futureLessons. js похожие к pastLesson. js

futureLessons. js

const FutureLessons = ({
  studentSlot,
  getFutureSlots,
  deleteStudentSlot,
  user,
}) => {
  useEffect(() => {
    getFutureSlots()
  }, [getFutureSlots])

  useEffect(() => {
    const interval = setInterval(() => {
      getFutureSlots();
    }, 60000);
    return () => clearInterval(interval);
  }, [getFutureSlots]);

Я пытался использовать приставку, но ничего не изменилось. Состояние файла "pastLesson. js" не изменяется. Только futureLessons. js обновляется каждую минуту. Изображение инструмента Redux dev вот так:

Изображение инструмента Redux dev

Состояния равны, но моя форма все данные очищены.