无法读取 reactjs 中未定义的属性 0 [英] Can not read property 0 of undefined in reactjs

问题描述

当用户可以在组件之间切换时，我有一个应用程序.接下来是应用程序的想法:

1. 用户点击添加字段按钮，会出现一个带有占位符passenger name
   
的输入
2. 用户在该输入中填写一些内容
   
3. 用户点击向内部添加字段按钮，会出现一个用户在其中写入值的输入
4. 用户点击提交内部按钮，应该会出现<Edit/>组件，其中包含来自输​​入的最后一个值.
   
5. 当用户点击返回默认模式按钮时，<Edit/>组件消失并显示默认模式和输入.

有问题的组件:

const DynamicFieldSet = props =>{const [fieldsOnEdit, setFieldsOnEdit] = useState([]);const [defaultMode, setDefaultMode] = useState(true);//const onFinish = values =>{//setFormVal(values);//console.log(defaultMode);//console.log(收到的表单值:", values);//setFieldsOnEdit(Array.from({ length: values.users.length }, (v, k) => k));//};const setFieldOnEdit = 索引 =>() =>{setFieldsOnEdit(prevIndexes => [...prevIndexes, index]);设置默认模式(假)；控制台日志(默认模式")；};控制台日志(道具"，道具)；返回 (<Form.List name={[props.fieldKey, "inner"]}>{(字段，{添加，删除})=>{返回 (<div>{fields.map((field, index) =>!fieldsOnEdit.includes(index) &&默认模式 === 真?(<空格键={field.key}style={{ display: flex", marginBottom: 8 }}对齐=开始"><Form.Item{...场地}name={[field.name, 第一个"]}fieldKey={[field.fieldKey, 第一个"]}rules={[{ required: true, message: "Missing first name";}]}><输入占位符=名字"/></Form.Item><表单.项目><按钮类型=主要"htmlType="提交"onClick={setFieldOnEdit(index)}>提交内部</按钮></Form.Item></空间>) : (<编辑value={props.values}模式={setDefaultMode}键形式={索引}/>))}<表单.项目><按钮类型=虚线"onClick={() =>{添加();}}堵塞><PlusOutlined/>将字段添加到内部</按钮></Form.Item>

);}}</Form.List>);};导出默认的 DynamicFieldSet；

编辑组件:

export const Edit = ({ mode, value, keyForm }) =>{useEffect(() => {console.log(编辑内的值"，值)；}, []);const 返回 = () =>{模式(真)；};返回 (<div>编辑模式<p>值:{value.names[keyForm].first}</p><button onClick={back}>回到默认模式</button>

);};

问题:当我点击提交内部按钮时，我收到类型错误:无法读取未定义的属性0".
问题:为什么我会收到此错误以及如何修复代码并获得所需的行为?
演示:https://codesandbox.io/s/wonderful-ives-o81ue?file=/Edit.js:339-359

解决方案

尽量定义一个默认值，或者注意准确地使用该数据结构:

export const Edit = ({ mode, value, keyForm }) =>{useEffect(() => {console.log(编辑内的值"，值)；}, []);const 返回 = () =>{模式(真)；};控制台日志(值:"，值)；//默认值定义const { 名称 = [] } = 值 ||{};const { 内部 = {} } = 名称 [0] ||[];const { 第一个 = ";} = 内部[keyForm] ||{};返回 (<div>编辑模式<p>值:{first}</p><button onClick={back}>回到默认模式</button>

);};

编辑

对于切换问题:

SubForm.js:

const DynamicFieldSet = props =>{const [fieldsOnEdit, setFieldsOnEdit] = useState([]);const toggleSmall = i =>{setFieldsOnEdit(prev => {if(prev.includes(i)) return prev.filter(ea => ea !== i);返回 [...prev, i];})}console.log("fieldsOnEdit", fieldsOnEdit);返回 (<Form.List name={[props.fieldKey, "inner"]}>{(字段，{添加，删除})=>{返回 (<div>{fields.map((field, index) =>!fieldsOnEdit.includes(index) ?(<空格键={field.key}style={{ display: flex", marginBottom: 8 }}对齐=开始"><Form.Item{...场地}name={[field.name, 第一个"]}fieldKey={[field.fieldKey, 第一个"]}rules={[{ required: true, message: "Missing first name";}]}><输入占位符=名字"/></Form.Item><表单.项目><按钮类型=主要"htmlType="提交"键=提交"onClick={()=>切换小(索引)}>提交内部</按钮></Form.Item></空间>) : (<编辑value={props.values}模式={toggleSmall}键形式={索引}/>))}<表单.项目><按钮类型=虚线"onClick={() =>{添加();}}堵塞><PlusOutlined/>将字段添加到内部</按钮></Form.Item>

);}}</Form.List>);};导出默认的 DynamicFieldSet；

Edit.js:

export const Edit = ({ mode, value, keyForm }) =>{useEffect(() => {console.log(编辑内的值"，值)；}, []);const { 名称 = [] } = 值 ||{};const { 内部 = {} } = 名称 [0] ||[];const { 第一个 = ";} = 内部[keyForm] ||{};返回 (<div>编辑模式<p>值:{first}</p><button onClick={()=>mode(keyForm)}>回到默认模式</button>