Javascript 尝试更新我的react应用程序中的状态，然后使用复选框向rails后端发送put请求

我有一份清单。我想选中清单上的一个框，然后更新react状态，然后向rails后端发送put请求，将清单对象保存在后端。我有几个问题

当对应的值为true时，我很难让react将复选框呈现为选中状态；当对应的值为false时，我很难让react将复选框呈现为未选中状态

当我选中复选框时，我的复选框将更新状态（或至少创建一个挂起的更新），但当我取消选中复选框时，我什么也不做

对于所有检查表值，我的数据总是作为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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, 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.referal_id, props.id)}
            />
            <lable for='telos_hq'>Loaded onto TelosHQ</lable>
        </section>
    )
}

import React，{useState}来自“React”
从“../reducers/checklist”导入检查表
导出默认功能检查表（道具）{
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[通知团队，设置通知团队]=useState（props.inform\u团队？true:false）
const[parent\u call，setParent\u call]=useState（props.parent\u call？true:false）
const[parents，setParents]=useState（props.parents？true:false）
const[receive_testing，setreceive_testing]=useState（props.receive_testing？true:false）
const[review\u testing，setReview\u testing]=useState（props.review\u testing？true:false）
const[staffing，setStaffing]=useState（props.staffing？true:false）
常量[步骤到步骤注册，设置步骤到步骤注册]=useState（props.steps到步骤注册？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\u scheduled，setTour\u scheduled]=useState（props.tour\u scheduled？true:false）
const[vetting，setVetting]=useState（props.vetting？true:false）
const[w_治疗师呼叫，setW_治疗师呼叫]=useState（props.w_治疗师呼叫？true:false）
常量checklistObj={
已完成的应用程序，
edcon_电话，
注册
通知团队，
家长电话，
父母
接受测试，
审查测试，
人员配备，
步骤到注册，
提交的文件，
分配的团队，
telos_总部，
巡回赛，
审查，
打电话给治疗师，
}
const updateCheck=（项目）=>{
开关（项目）{
案例“接收测试”：
设置接收测试（！接收测试）
打破
案例“审查测试”：
setReview_测试（！review_测试）
打破
案例“edcon_call”：
setEdcon_调用（！edcon_调用）
打破
“w_治疗师呼叫”案例：
setW_治疗师呼叫（！w_治疗师呼叫）
打破
“人员配置”案例：
设置人员配备（！人员配备）
打破
“家长电话”案例：
设置父调用（！父调用）
打破
“巡回演出计划”案例：
setTour_计划（！tour_计划）
打破
案例“步骤到注册”：
设置步骤到注册（！步骤到注册）
打破
案例“已完成的应用程序”：
设置已完成的应用程序（！已完成的应用程序）
打破
案例“已提交文件”：
设置提交的文档（！提交的文档）
打破
“通知团队”案例：
setInform_团队（！inform_团队）
打破
案例“分配的团队”：
已分配任务组（！已分配任务组）
打破
“telos_hq”案例：
塞特洛斯总部（！泰洛斯总部）
打破
}
}
异步函数updateChecklistUi（项、引用id、id）{
等待更新检查（项目）
如果（props.color==“橙色”| | props.color==“黄色”）{
如果(
接收测试===true&&
检查测试===正确&&
edcon_调用===真&&
w_治疗师_call===真&&
人员配置===true
){设置（正确）}
}否则如果（props.color==“绿色”）{
如果(
接收测试===true&&
检查测试===正确&&
edcon_调用===真&&
w_治疗师_call===真
){设置（正确）}
}
如果(
父调用===true&&
巡更计划===true&&
步骤到注册===true&&
已完成的应用程序===true&&
已提交的文档===true
){setParents（true）}
如果(
通知团队===true&&
分配的团队===true&&
telos_hq==真
){setEnrollment（true）}
等待道具设置检查表（checklistObj）
log（'beforeAxios:'，checklistObj）
wait props.updateChecklist（参考号，id，checklistObj）
}
返回(
{console.log（'props'，props）}
检查表
审查
updateChecklistUi（e.target.name，props.referal\u id，props.id）}
/>
接受测试


updateChecklistUi（e.target.name，props.referal\u id，props.id）}
/>
审查测试


UPDATECECKLIST
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, id, 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