如何解决尝试更新我的React应用程序中的状态，然后使用复选框将放置请求发送到Rails后端
我有一个清单。我想检查清单上的一个框，然后更新反应状态，然后将放置请求发送到我的rails后端，以将清单对象保存在后端中。我遇到几个问题
-
当相应值为true时，我无法做出反应以将复选框呈现为选中状态，而当相应值为false时，我却无法进行选择
-
当我选中复选框时，我的复选框将更新状态（或至少创建一个待处理的更新），但是当我取消选中它们时不执行任何操作
-
即使检查了某些清单值，我的数据也总是以false的形式发送到我的后端
这是我的清单代码
import React,{ useState } from 'react'
import checklist from '../reducers/checklist'
export default function Checklist(props) {
const [completed_app,setCompleted_app] = useState(props.completed_app ? props.completed_app : false)
const [edcon_call,setEdcon_call] = useState(props.edcon_call ? true : false)
const [enrollment,setEnrollment] = useState(props.enrollment ? true : false)
const [inform_team,setInform_team] = useState(props.inform_team ? true : false)
const [parent_call,setParent_call] = useState(props.parent_call ? true : false)
const [parents,setParents] = useState(props.parents ? true : false)
const [recieve_testing,setRecieve_testing] = useState(props.recieve_testing ? true : false)
const [review_testing,setReview_testing] = useState(props.review_testing ? true : false)
const [staffing,setStaffing] = useState(props.staffing ? true : false)
const [steps_to_enroll,setSteps_to_enroll] = useState(props.steps_to_enroll ? true : false)
const [submitted_docs,setSubmitted_docs] = useState(props.submitted_docs ? true : false)
const [team_assigned,setTeam_assigned] = useState(props.team_assigned? true : false)
const [telos_hq,setTelos_hq] = useState(props.telos_hq ? true : false)
const [tour_scheduled,setTour_scheduled] = useState(props.tour_scheduled ? true : false)
const [vetting,setVetting] = useState(props.vetting? true : false)
const [w_therapist_call,setW_therapist_call] = useState(props.w_therapist_call ? true : false)
const checklistObj = {
completed_app,edcon_call,enrollment,inform_team,parent_call,parents,recieve_testing,review_testing,staffing,steps_to_enroll,submitted_docs,team_assigned,telos_hq,tour_scheduled,vetting,w_therapist_call,}
const updateCheck = (item) => {
switch(item){
case 'recieve_testing':
setRecieve_testing(!recieve_testing)
break;
case 'review_testing':
setReview_testing(!review_testing)
break;
case 'edcon_call':
setEdcon_call(!edcon_call)
break;
case 'w_therapist_call':
setW_therapist_call(!w_therapist_call)
break;
case 'staffing':
setStaffing(!staffing)
break;
case 'parent_call':
setParent_call(!parent_call)
break;
case 'tour_scheduled':
setTour_scheduled(!tour_scheduled)
break;
case 'steps_to_enroll':
setSteps_to_enroll(!steps_to_enroll)
break;
case 'completed_app':
setCompleted_app(!completed_app)
break;
case 'submitted_docs':
setSubmitted_docs(!submitted_docs)
break;
case 'inform_team':
setInform_team(!inform_team)
break;
case 'team_assigned':
setTeam_assigned(!team_assigned)
break;
case 'telos_hq':
setTelos_hq(!telos_hq)
break;
}
}
async function updateChecklistUi(item,referral_id,id){
await updateCheck(item)
if (props.color === "orange" || props.color === "yellow"){
if (
recieve_testing === true &&
review_testing === true &&
edcon_call === true &&
w_therapist_call === true &&
staffing === true
) {setVetting(true)}
} else if (props.color === "green") {
if (
recieve_testing === true &&
review_testing === true &&
edcon_call === true &&
w_therapist_call === true
) {setVetting(true)}
}
if (
parent_call === true &&
tour_scheduled === true &&
steps_to_enroll === true &&
completed_app === true &&
submitted_docs === true
){ setParents(true)}
if (
inform_team === true &&
team_assigned === true &&
telos_hq === true
){setEnrollment(true)}
await props.setChecklist(checklistObj)
console.log('beforeAxios:',checklistObj)
await props.updateChecklist(referral_id,id,checklistObj)
}
return (
<section>
{console.log('props',props)}
<h3><strong>Checklist</strong></h3>
<h5>Vetting</h5>
<input
type='checkbox'
name='recieve_testing'
checked={!!recieve_testing}
onChange={(e) => updateChecklistUi(e.target.name,props.referal_id,props.id)}
/>
<lable for='recieve_testing'>Recieve testing</lable>
<br/>
<input
type='checkbox'
name='review_testing'
checked={!!review_testing}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='review_testing'>Review testing</lable>
<br/>
<input
type='checkbox'
name='edcon_call'
checked={!!edcon_call}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='ed_con_call'>Call with Education Consultant</lable>
<br/>
<input
type='checkbox'
name='w_therapist_call'
checked={!!w_therapist_call}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='w_therapist_call'>Call with Wilderness Therapist</lable>
<br/>
{props.color == 'yellow' || props.color == 'orange' ?
<>
<input
type='checkbox'
name='staffing'
checked={!!staffing}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='staffing'>Staffing with team</lable>
<br/>
</> :
null
}
<h5>Parents</h5>
<input
type='checkbox'
name='parent_call'
checked={!!parent_call}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='parent_call'>Call with Parents</lable>
<br/>
<input
type='checkbox'
name='tour_scheduled'
checked={!!tour_scheduled}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='tour_scheduled'>Schedule Tour</lable>
<br/>
<input
type='checkbox'
name='steps_to_enroll'
checked={!!steps_to_enroll}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='steps_to_enroll'>Steps to Enrollment Complete</lable>
<br/>
<input
type='checkbox'
name='completed_app'
checked={!!completed_app}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='completed_app'>Application Completed</lable>
<br/>
<input
type='checkbox'
name='submitted_docs'
checked={!!submitted_docs}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='submitted_docs'>Documents Submitted</lable>
<br/>
<h5>Enrollment Process</h5>
<input
type='checkbox'
name='inform_team'
checked={!!inform_team}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='inform_team'>Team Informed of Enrollment</lable>
<br/>
<input
type='checkbox'
name='team_assigned'
checked={!!team_assigned}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='team_assigned'>Team Assigned</lable>
<br/>
<input
type='checkbox'
name='telos_hq'
checked={!!telos_hq}
onChange={(e) => updateChecklistUi(e.target.name,props.id)}
/>
<lable for='telos_hq'>Loaded onto TelosHQ</lable>
</section>
)
}
这是呈现我的清单组件的引荐：
import React,{ useState,useEffect } from 'react';
import { Button } from '@material-ui/core';
import AddReferal from './AddReferal';
import { useHistory } from 'react-router';
import Checklist from './Checklist';
import Axios from 'axios';
export default function Referral(props) {
const history = useHistory()
const [editing,setEditing] = useState(false)
const [checklist,setChecklist] = useState({})
const { f_name,l_name,source,ed_con,therapist,w_therapist,created_at,status,color,result,id
} = props.location.state.referral
useEffect(()=> {
Axios.get(`/api/referals/${id}/checklists`)
.then(res => {
console.log(res.data)
setChecklist(res.data)
})
.catch(err => {
console.log(err)
})
},[])
const updateChecklist = (referralId,checklistObj) => {
Axios.put(`/api/referals/${referralId}/checklists/${id}`,checklistObj)
.then(res => {
console.log(res.data)
setChecklist(res.data)
})
.catch(err => {
console.log(err.message)
})
}
return (
<div style={styles.page}>
<div style={styles.sideBySide}>
<div>
<h1><strong>{f_name} {l_name}</strong></h1>
<p>Source: {source} </p>
<p>Educational Consultant: {ed_con}</p>
<p>Wilderness Therapist: {w_therapist}</p>
<p>TelosU Therapist: {therapist}</p>
<p>Created at: {created_at}</p>
<Button onClick={() => setEditing(!editing)}>Edit</Button>
<Button onClick={() => props.deleteReferral(id,history)}>Delete</Button>
</div>
<Checklist
{...checklist}
color={color}
setChecklist={setChecklist}
updateChecklist={updateChecklist}
/>
</div>
{editing &&
<AddReferal
initF_name={f_name}
initL_name={l_name}
initSource={source}
initEd_con={ed_con}
initTherapist={therapist}
initW_therapist={w_therapist}
initStatus={status}
initColor={color}
initResult={result}
editId = {id}/>}
</div>
)
}
const styles = {
sideBySide: {
display: 'flex',justifyContent:'space-between',alignItems: 'center',},page: {
maxWidth:'95vw'
}
}
这是我的清单控制器
class Api::ChecklistsController < ApplicationController
before_action :set_checklist,only: [:update,:show]
def index
referal = Referal.find(params[:referal_id])
render json: referal.checklist
end
def show
end
def update
@checklist.update(checklist_params)
if @checklist.save
render json: @checklist
else
render json: {errors: @checklist.errors,status: 422}
end
end
private
def set_checklist
@checklist = Checklist.find(params[:id])
end
def checklist_params
params.require(:checklist).permit(
:completed_app,:edcon_call,:enrollment,:inform_team,:parent_call,:parents,:recieve_testing,:review_testing,:staffing,:steps_to_enroll,:submitted_docs,:team_assigned,:telos_hq,:tour_scheduled,:vetting,:w_therapist_call
)
end
end
清单是与引荐的has_one关系的一部分，因此它是在引荐控制器中创建的（我知道引荐在后端拼写错误），所有值均默认为false。
任何帮助将不胜感激！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。