Блог

Когда эта страница загружается в первый раз или когда страница обновляется, любые редактируемые поля/входные данные (цена, результаты, конкретное лечение и т. Д.) Не загружают значение начального состояния. Они просто остаются пустыми. Поля, которые нельзя редактировать (дата, время, продолжительность и т.д.), Загружаются просто отлично. Есть какие-нибудь мысли о том, почему это может быть?

 import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useParams, useHistory } from 'react-router-dom' import { getAppointment, updateAppointment } from '../../../actions/appointment'  const AppointmentDetails = () =gt; {   const params = useParams()  const dispatch = useDispatch()  const history = useHistory()   useEffect(()=gt;{  dispatch(getAppointment(params?.id))  }, [dispatch, params.id])   const userState = useSelector((state)=gt;state?.usersReducer?.appointment)  const appointments = userState?.appointments?.find(({_id})=gt; _id === params?.id)   const [findings, setFindings] = useState(appointments?.findings ? (appointments?.findings) : (''))  const [generalTreatment, setGeneralTreatment] = useState(appointments?.treatment?.generalTreatment ? (appointments?.treatment?.generalTreatment) : (''))  const [specificTreatment, setSpecificTreatment] = useState(appointments?.treatment?.specificTreatment ? (appointments?.treatment?.specificTreatment) : (''))  const [subjectiveResults, setSubjectiveResults] = useState(appointments?.results?.subjectiveResults ? (appointments?.results?.subjectiveResults) : (''))  const [objectiveResults, setObjectiveResults] = useState(appointments?.results?.objectiveResults ? (appointments?.results?.objectiveResults) : (''))  const [remex, setRemex] = useState(appointments?.remex ? (appointments?.remex) : (''))  const [treatmentPlan, setTreatmentPlan] = useState(appointments?.treatmentPlan ? (appointments?.treatmentPlan) : (''))  const [paymentType, setPaymentType] = useState(appointments?.paymentType ? (appointments?.paymentType) : (''))  const [paid, setPaid] = useState(false)  const [price, setPrice] = useState(appointments?.price ? (appointments?.price) : (''))   const formData = {  paymentType,  findings,  treatment: {  generalTreatment,  specificTreatment  },  results: {  subjectiveResults,  objectiveResults,  },  remex,  treatmentPlan,  price  }   const clear = () =gt; {  setPaymentType('')  setFindings('')  setSpecificTreatment('')  setGeneralTreatment('')  setSubjectiveResults('')  setObjectiveResults('')  setRemex('')  setTreatmentPlan('')  setPrice('')  }   const handleSubmit = (e) =gt; {  e.preventDefault()  dispatch(updateAppointment(userState?._id, appointments?._id, formData))  history.push('/rmt/dashboard')  clear()   }   return (  !userState ? (  lt;divgt;  Loading  lt;/divgt;  ) : (  lt;divgt;  lt;h3gt;{userState.firstName} {userState.lastName}lt;/h3gt;  lt;table className="ui table"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Datelt;/thgt;  lt;thgt;Timelt;/thgt;  lt;thgt;Durationlt;/thgt;  lt;thgt;Pricelt;/thgt;  lt;thgt;Payment typelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;tdgt;{appointments?.date}lt;/tdgt;  lt;tdgt;{appointments?.time}lt;/tdgt;  lt;tdgt;{appointments?.duration}lt;/tdgt;  lt;tdgt;  lt;div className="ui input"gt;  lt;input type="text" value={price} onChange={(e)=gt;setPrice(e.target.value)} /gt;  lt;/divgt;  lt;/tdgt;  lt;tdgt;  lt;select className="ui fluid dropdown" value={paymentType} onChange={(e)=gt;setPaymentType(e.target.value)}gt;  lt;option value='' disabled='disabled'gt;Select payment typelt;/optiongt;  lt;option value='unpaid'gt;Unpaidlt;/optiongt;  lt;option value='credit'gt;Credit cardlt;/optiongt;  lt;option value='debit'gt;Debitlt;/optiongt;  lt;option value='cash/etransfer'gt;Cash/e-transferlt;/optiongt;  lt;/selectgt;  {appointments?.paymentType === '' || 'unpaid' ? (  lt;divgt;  lt;input type='checkbox' value={paid} onChange={(e)=gt;setPaid(e.target.checked)} /gt;  lt;label style={{marginLeft: '10px'}}gt;payment received?lt;/labelgt;  lt;/divgt;  ) : (  lt;divgt;lt;/divgt;  )}  lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt;  lt;table className="ui table"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Reason for massagelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;tdgt;{appointments?.reasonForMassage}lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt;  lt;table className="ui table"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Consents givenlt;/thgt;  lt;thgt;Areas to avoidlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;tdgt;  {!appointments ? (  lt;divgt;No consent datalt;/divgt;  ) : (  lt;div className="ui list"gt;  {appointments?.consents?.glutes === true ? lt;div className="ui item" gt;Gluteslt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.chest === true ? lt;div className="ui item" gt;Chestlt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.innerThighs === true ? lt;div className="ui item" gt;Inner thighslt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.abdomen === true ? lt;div className="ui item" gt;Abdomenlt;/divgt; : lt;divgt;lt;/divgt;}  lt;/divgt;  )}  lt;/tdgt;  lt;tdgt;  {!appointments ? (  lt;divgt;No consent datalt;/divgt;  ) : (  lt;div className="ui list"gt;  {appointments?.consents?.glutes === false ? lt;div className="ui item" style={{color: 'red'}}gt;Gluteslt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.chest === false ? lt;div className="ui item" style={{color: 'red'}}gt;Chestlt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.innerThighs === false ? lt;div className="ui item" style={{color: 'red'}}gt;Inner thighslt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.abdomen === false ? lt;div className="ui item" style={{color: 'red'}}gt;Abdomenlt;/divgt; : lt;divgt;lt;/divgt;}  {appointments?.consents?.areasToAvoid ? lt;div className="ui item" style={{color: 'red'}}gt;{appointments?.consents?.areasToAvoid}lt;/divgt; : lt;divgt;lt;/divgt;}  lt;/divgt;  )}  lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt;  lt;form className="ui form" onSubmit={handleSubmit}gt;  lt;divgt;  lt;labelgt;Findingslt;/labelgt;  lt;input type="text" value={findings} onChange={(e)=gt;setFindings(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Specific Treatmentlt;/labelgt;  lt;input type="text" value={specificTreatment} onChange={(e)=gt;setSpecificTreatment(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;General Treatmentlt;/labelgt;  lt;input type="text" value={generalTreatment} onChange={(e)=gt;setGeneralTreatment(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Subjective Resultslt;/labelgt;  lt;input type="text" value={subjectiveResults} onChange={(e)=gt;setSubjectiveResults(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Objective Resultslt;/labelgt;  lt;input type="text" value={objectiveResults} onChange={(e)=gt;setObjectiveResults(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Remexlt;/labelgt;  lt;input type="text" value={remex} onChange={(e)=gt;setRemex(e.target.value)} /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Treatment Planlt;/labelgt;  lt;input type="text" value={treatmentPlan} onChange={(e)=gt;setTreatmentPlan(e.target.value)} /gt;  lt;/divgt;  lt;button type="submit" className="ui pink button" style={{marginTop: '10px', marginBottom: '20px'}}gt;Updatelt;/buttongt;  lt;/formgt;  lt;/divgt;  )  ) }  export default AppointmentDetails