问题描述
我在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",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
当我显示父元素时，我会在其内部调用FormGenerator并传递孩子作为道具
{
value.children !== undefined && value.children.length > 0 && <FormGenerator data={value.children} correctAnswerId={value.correctAnswerId} />
}
问题是props.correctAnswerId始终在渲染函数的if和else语句内部未找到
我什至尝试
let correctAnswerId = props.correctAnswerId
在if语句之前但仍正确的AnswerId未定义
什么会导致我的道具和变量在if and else里面无法定义
但另一方面是数据道具
let data = props.data
没问题！
注意：我知道正确的答案只有在我们接收孩子的时候才会传递给FormGenerator
但是我测试了代码并在if和else语句之前进行了CorrectAnswerId的查找，并且我已经在正确的时间获取了值，但是当我将正确的AnswerId放在if语句中时，它返回未定义的值。
在我的代码中
console.log("props_1",props)
正在接收正确的AnswerId
但是
console.log("props_2",props)
不是....
我什至试图将正确的AnswerId放入状态并从那里使用它 但是实际上，问题可能出在它自身的正确AnswerId
由于其他变量和道具，它可以正常工作...
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）