Javascript 无法读取reactjs中未定义的属性0

当用户有可能在组件之间切换时，我有一个应用程序。该应用程序的想法是：

用户点击

添加字段按钮

，出现一个带有占位符

乘客姓名的输入

用户在该输入中填写一些内容

用户点击

将字段添加到内部
按钮，出现一个输入，用户在其中写入一个值

用户单击

提交内部

按钮，应显示

组件以及输入的最后一个值。

当用户单击

返回默认模式

按钮时，

组件将消失，并显示为带有输入的默认模式

出现问题的组件：

const DynamicFieldSet = props => {
  const [fieldsOnEdit, setFieldsOnEdit] = useState([]);
  const [defaultMode, setDefaultMode] = useState(true);
  // const onFinish = values => {
  //   setFormVal(values);
  //   console.log(defaultMode);
  //   console.log("Received values of form:", values);
  //   setFieldsOnEdit(Array.from({ length: values.users.length }, (v, k) => k));
  // };

  const setFieldOnEdit = index => () => {
    setFieldsOnEdit(prevIndexes => [...prevIndexes, index]);
    setDefaultMode(false);
    console.log("defaultMode");
  };
  console.log("props", props);

  return (
    <Form.List name={[props.fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) =>
              !fieldsOnEdit.includes(index) && defaultMode === true ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      onClick={setFieldOnEdit(index)}
                    >
                      Submit inner
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit
                  value={props.values}
                  mode={setDefaultMode}
                  keyForm={index}
                />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
};
export default DynamicFieldSet;

const DynamicFieldSet=props=>{
const[fieldsOnEdit，setFieldsOnEdit]=useState（[]）；
const[defaultMode，setDefaultMode]=useState（true）；
//const onFinish=值=>{
//setFormVal（值）；
//console.log（默认模式）；
//log（“接收到的值的形式：”，值）；
//setFieldsOnEdit（Array.from（{length:values.users.length}，（v，k）=>k））；
// };
const setFieldOnEdit=索引=>（）=>{
setFieldsOnEdit（prevIndexes=>[…prevIndexes，index]）；
setDefaultMode（false）；
console.log（“defaultMode”）；
};
控制台日志（“道具”，道具）；
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（（字段，索引）=>
！fieldsOnEdit.includes（索引）&&defaultMode==true(
提交内部
) : (
)
)}
{
添加（）；
}}
块
>
将字段添加到内部
);
}}
);
};
导出默认动态字段集；

编辑组件：

export const Edit = ({ mode, value, keyForm }) => {
  useEffect(() => {
    console.log("value inside edit", value);
  }, []);
  const back = () => {
    mode(true);
  };
  return (
    <div>
      edit mode
      <p>value: {value.names[keyForm].first}</p>
      <button onClick={back}>back to default mode</button>
    </div>
  );
};

export const Edit=（{mode，value，keyForm}）=>{
useffect（（）=>{
console.log（“编辑中的值”，值）；
}, []);
常量返回=（）=>{
模式（真）；
};
返回(
编辑模式
值：{value.names[keyForm].first}

返回默认模式
);
};

问题：当我单击

提交内部

按钮时，出现类型错误：

无法读取未定义的属性“0”

问题：为什么会出现此错误，以及如何修复代码并获得想要的行为？
演示：

编辑： 我认为设置状态会干扰formVal更新

setTimeout(() => {
      setFieldsOnEdit(prevIndexes => [...prevIndexes, index]);
      setDefaultMode(false);
    }, 0);

---

将其放置在setTimeout中可解决此问题。

请尝试始终定义默认值，或注意精确设置该数据结构：

export const Edit = ({ mode, value, keyForm }) => {
  useEffect(() => {
    console.log("value inside edit", value);
  }, []);
  const back = () => {
    mode(true);
  };
  console.log("VALUE: ", value);
  // Default value definitions
  const { names = [] } = value || {};

  const { inner = {} } = names[0] || [];

  const { first = "" } = inner[keyForm]  || {};

  return (
    <div>
      edit mode
      <p>value: {first}</p>
      <button onClick={back}>back to default mode</button>
    </div>
  );
};

export const Edit=（{mode，value，keyForm}）=>{
useffect（（）=>{
console.log（“编辑中的值”，值）；
}, []);
常量返回=（）=>{
模式（真）；
};
日志（“值：”，值）；
//默认值定义
常量{names=[]}=value | |{}；
常量{inner={}}=names[0]| |[]；
const{first=”“}=内部[keyForm]| |{}；
返回(
编辑模式
值：{first}

返回默认模式
);
};

编辑

对于切换问题：

SubForm.js：

const DynamicFieldSet = props => {
  const [fieldsOnEdit, setFieldsOnEdit] = useState([]);


  const toggleSmall = i => {
    setFieldsOnEdit(prev => {
      if(prev.includes(i)) return prev.filter(ea => ea !== i);

      return [...prev, i];
    })
  }

  console.log("fieldsOnEdit", fieldsOnEdit);

  return (
    <Form.List name={[props.fieldKey, "inner"]}>
      {(fields, { add, remove }) => {
        return (
          <div>
            {fields.map((field, index) =>
              !fieldsOnEdit.includes(index) ? (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      key="submit"
                      onClick={()=> toggleSmall(index)}
                    >
                      Submit inner
                    </Button>
                  </Form.Item>
                </Space>
              ) : (
                <Edit
                  value={props.values}
                  mode={toggleSmall}
                  keyForm={index}
                />
              )
            )}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => {
                  add();
                }}
                block
              >
                <PlusOutlined /> Add field to inner
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
};
export default DynamicFieldSet;

const DynamicFieldSet=props=>{
const[fieldsOnEdit，setFieldsOnEdit]=useState（[]）；
const toggleSmall=i=>{
setFieldsOnEdit（上一个=>{
if（prev.includes（i））返回prev.filter（ea=>ea！==i）；
返回[…上一个，i]；
})
}
console.log（“fieldsOnEdit”，fieldsOnEdit）；
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（（字段，索引）=>
！fieldsOnEdit.includes（索引）(
切换小（索引）}
>
提交内部
) : (
)
)}
{
添加（）；
}}
块
>
将字段添加到内部
);
}}
);
};
导出默认动态字段集；

Edit.js：

export const Edit = ({ mode, value, keyForm }) => {

  useEffect(() => {
    console.log("value inside edit", value);
  }, []);

  const { names = [] } = value || {};

  const { inner = {} } = names[0] || [];

  const { first = "" } = inner[keyForm]  || {};

  return (
    <div>
      edit mode
      <p>value: {first}</p>
      <button onClick={()=> mode(keyForm)}>back to default mode</button>
    </div>
  );
};

export const Edit=（{mode，value，keyForm}）=>{
useffect（（）=>{
console.log（“编辑中的值”，值）；
}, []);
常量{names=[]}=value | |{}；
常量{inner={}}=names[0]| |[]；
const{first=”“}=内部[keyForm]| |{}；
返回(
编辑模式
值：{first}

模式（keyForm）}>返回默认模式
);
};

@Drew Reese，你能帮忙吗？我完全不熟悉

antd

，但从一些基本调试中我可以看出

formVal

在调用

表单的
onFinish
并更新状态之前一直是一个空对象<当
子表单
呈现
编辑
并将
值
传递给它时，code>InnerForm

似乎不会接收更新的

formVal

属性值。在

Edit

中，value

是一个空对象，因此

value.names

是未定义的，并且上面没有可访问的属性

0

。@drewerese，您现在有没有用RectJs解决这个问题的方法？如果我写

onClick={（）=>setFieldOnEdit（index）}

，我无法在组件之间切换，

组件不会出现。或者我理解错了您的解决方案？@Pavlos

setFieldOnEdit

是一个curried函数，允许将

索引

值保存在存储模块中，并返回一个函数用作回调。啊，好的，这很有意义then@AskMen我想出了一个解决办法；见编辑answer@PavlosKaralis，它很好用