Javascript props、states和其他变量在if语句-ReactJs中未定义

我在ReactJs中有一个带有递归调用的FormGenerator组件

import React , {useState} from 'react'
import {CCol,CForm,CFormGroup,CInput,CInputRadio,CLabel,CRow,CButtonGroup, CInputCheckbox} from '@coreui/react'
import { useSelector, useDispatch } from 'react-redux'

const FormGenerator = (props) => {

const dispatch = useDispatch()
const infantStore = useSelector(state => state.infantStore)

const infantInputChangeHandler = (e) => {
    dispatch({ type: "setInfantInput", payload: e.currentTarget.value, name: e.target.name })
}

const infantCheckboxChangeHandler = (e) => {
    dispatch({ type: "setInfantInput", payload: e.currentTarget.value, name: e.target.name })
}

let data = props.data

return (
    <>
    {/* {console.log("props1",props)} */}
        {
            Object.entries(data).map(([key, value]) => {
      
                const correctAnswerId = props.correctAnswerId
                console.log("props_1",props)
                if (value.answers !== undefined && value.answers[0] !== undefined && (value.answers[0].type === 'boolean' || value.answers[0].type === 'options' || value.answers[0].type === 'bit' || value.answers[0].type === 'multi_options')) {
                    console.log("props_2",props)
                    return (
                        <React.Fragment key={key}>
                            <CCol xs="12" md="6">
                                <CFormGroup row>
                                    <CCol md="5" className="d-flex justify-content-center align-items-center">
                                        <CLabel htmlFor="reAdmissionId" className={value.required === "1" && "rl"}>{value.name}</CLabel>
                                    </CCol>
                                    <CCol xs="12" md="7">
                                        <CButtonGroup className="w-100">
                                            {
                                                Object.entries(value.answers).map(([awsnerKey, answerValue], j) => {
                                                    // console.log(answerValue)
                                                    return (
                                                        <>
                                                            {
                                                                value.answers[0].type === 'multi_options' ? <CLabel className="btn btn-light btn_radio">
                                                                    <CInputCheckbox disabled={!(value.parentItemId == null || (value.parentItemId !== null && infantStore[`admissionItem${value.parentItemId}`] !== undefined && infantStore[`admissionItem${value.parentItemId}`] == correctAnswerId))} value={answerValue.id} name={`admissionItem${value.id}_${answerValue.id}`} className={answerValue.type === "boolean" && (answerValue.id == 3 ? "true_option" : "false_option")} /> <span>{answerValue.answer}</span>
                                                                </CLabel>
                                                                    : <CLabel className="btn btn-light btn_radio">
                                                                        <CInputRadio disabled={!(value.parentItemId == null || (value.parentItemId !== null && infantStore[`admissionItem${value.parentItemId}`] !== undefined && infantStore[`admissionItem${value.parentItemId}`] == correctAnswerId))} checked={infantStore[`admissionItem${value.id}`] == answerValue.id} onChange={infantInputChangeHandler} id={`admissionItem${value.id}`} value={answerValue.id} name={`admissionItem${value.id}`} className={(answerValue.type === "boolean" || answerValue.type === "bit") && ((answerValue.id == 3 || answerValue.id == 1) ? "true_option" : "false_option")} /> <span>{answerValue.answer}</span>
                                                                    </CLabel>

                                                            }
                                                        </>
                                                    )

                                                })
                                            }

                                        </CButtonGroup>
                                    </CCol>

                                </CFormGroup>
                            </CCol>
                            {/* {
                                console.log(`admissionItem${value.id}`,infantStore[`admissionItem${value.id}`] !== undefined && infantStore[`admissionItem${value.id}`] == value.correctAnswerId)
                            } */}

                            {
                                value.children !== undefined && value.children.length > 0 && <FormGenerator data={value.children} correctAnswerId={value.correctAnswerId} />
                            }
                        </React.Fragment>


                    )
                } else if (value.answers !== undefined && value.answers[0] !== undefined && (value.answers[0].type === 'text' || value.answers[0].type === 'number' || value.answers[0].type.startsWith("float_"))) {
                    
                    // console.log(correctAnswerId)
                    
                    return (

                        <React.Fragment>
                            <CCol xs="12" md="6" key={key}>
                                <CFormGroup row>
                                    <CCol md="5" className="d-flex justify-content-center align-items-center">
                                        <CLabel htmlFor={`admissionItem${value.id}`} className={value.required === "1" && "rl"}>{value.name}</CLabel>
                                    </CCol>
                                    <CCol xs="12" md="7">
                                        <CInput disabled={!(value.parentItemId == null || (value.parentItemId !== null && infantStore[`admissionItem${value.parentItemId}`] !== undefined && infantStore[`admissionItem${value.parentItemId}`] == correctAnswerId))} name={`admissionItem${value.id}`} placeholder={value.name} autoComplete="off" />
                                    </CCol>
                                </CFormGroup>
                            </CCol>
                            {
                                value.children !== undefined && value.children.length > 0 && <FormGenerator data={value.children} correctAnswerId={value.correctAnswerId} />
                            }
                        </React.Fragment>

                    )
                }
            })

        }
    </>
)
}

export default FormGenerator

if语句之前但仍然正确的AnswerId未定义

什么会导致我的道具和变量在if和else中被取消查找

但另一方面，数据支持

let data = props.data

没问题

注意：我知道当我们收到孩子的时候，正确答案只会传递给FormGenerator

但是我测试了代码，并且correctAnswerId在if和else语句之前工作，并且我在正确的时间收到了值，但是当我将correctAnswerId放入if语句中时，它返回未定义的

在我的代码中

console.log("props_1",props)

收到正确答案了吗

但是

不是

我甚至试着把correctAnswerId放在州内，并在那里使用它 但不管是什么，问题可能来自正确的答案

---

因为在其他变量和道具上，它只需查找…

请注意，道具是不可变的，不能在组件内部更改，因此需要检查从父级传递的道具。另外，我建议使用props Destruction以更好地理解代码，并使用proptypes进行调试。但是correctAnswerId是不可变的，我不会更改它，correctAnswerId始终是相同的数字

let data = props.data

console.log("props_1",props)

 console.log("props_2",props)