Блог

У меня есть компонент FormGenerator с рекурсивным вызовом в ReactJS

 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 amp;amp; value.answers[0] !== undefined amp;amp; (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" amp;amp; "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 amp;amp; infantStore[`admissionItem${value.parentItemId}`] !== undefined amp;amp; infantStore[`admissionItem${value.parentItemId}`] == correctAnswerId))} value={answerValue.id} name={`admissionItem${value.id}_${answerValue.id}`} className={answerValue.type === "boolean" amp;amp; (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 amp;amp; infantStore[`admissionItem${value.parentItemId}`] !== undefined amp;amp; 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") amp;amp; ((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 amp;amp; infantStore[`admissionItem${value.id}`] == value.correctAnswerId)
                            } */}

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


                    )
                } else if (value.answers !== undefined amp;amp; value.answers[0] !== undefined amp;amp; (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" amp;amp; "rl"}>{value.name}</CLabel>
                                    </CCol>
                                    <CCol xs="12" md="7">
                                        <CInput disabled={!(value.parentItemId == null || (value.parentItemId !== null amp;amp; infantStore[`admissionItem${value.parentItemId}`] !== undefined amp;amp; infantStore[`admissionItem${value.parentItemId}`] == correctAnswerId))} name={`admissionItem${value.id}`} placeholder={value.name} autoComplete="off" />
                                    </CCol>
                                </CFormGroup>
                            </CCol>
                            {
                                value.children !== undefined amp;amp; value.children.length > 0 amp;amp; <FormGenerator data={value.children} correctAnswerId={value.correctAnswerId} />
                            }
                        </React.Fragment>

                    )
                }
            })

        }
    </>
)
}

export default FormGenerator
  

У меня есть некоторые родительские и дочерние входные данные, которые я извлекаю из API в формате Json

Когда я показываю родительские элементы, я вызываю FormGenerator внутри себя и передаю ему дочерние элементы в качестве реквизита

 {
                                value.children !== undefined amp;amp; value.children.length > 0 amp;amp; <FormGenerator data={value.children} correctAnswerId={value.correctAnswerId} />
                            }
  

проблема заключается в props.correctAnswerId всегда не определяется внутри операторов if и else при рендеринге функции

я даже пытался

 let correctAnswerId = props.correctAnswerId
  

перед оператором if, но по-прежнему correctAnswerId не определен

что приведет к тому, что мои реквизиты и переменная не будут определены внутри if и else

но в другой руке реквизит данных

 let data = props.data
  

не имеет проблем!

Примечание: я знаю, что correctAnswerId будет передаваться только в FormGenerator, когда мы получим дочерние элементы

Но я протестировал код, и correctAnswerId работает непосредственно перед операторами if и else , и я получил значение в нужное время, но когда я помещаю correctAnswerId внутри оператора if , он возвращает undefined ….

в моем коде

 console.log("props_1",props)
  

получает ли correctAnswerId

но

  console.log("props_2",props)
  

нет ….

я даже пытался поместить correctAnswerId внутри state и использовать его оттуда, но, несмотря на это, проблема может быть в самом correctAnswerId

потому что для других переменных и реквизитов он работает просто find …