React Native TypeError: undefined is not an object ('evalating useFormikContext.errors')

Question

我正在开发一个带有本机反应的应用程序。 对表单使用 formik，我收到此错误 'TypeError: undefined is not an object (evalating '_useFormikContext.errors') '

import { useFormikContext } from "formik";

import { ErrorMessage } from "./index";
import ImageInputList from "../ImageInputList";

function FormImagePicker({ name }) {
  const { errors, setFieldValue, touched, values } = useFormikContext();
  const imageUris = values[name];

  const handleAdd = (uri) => {
    setFieldValue(name, [...imageUris, uri]);
  };
  const handleRemove = (uri) => {
    setFieldValue(
      name,
      imageUris.filter((imageUri) => imageUri !== uri)
    );
  };

  return (
    <>
      <ImageInputList
        imageUris={imageUris}
        onAddImage={handleAdd}
        onRemoveImage={handleRemove}
      />
      <ErrorMessage error={errors[name]} visible={touched[name]} />
    </>
  );
}

export default FormImagePicker;

Answer 1

您正在尝试获取尚未定义的对象属性，请尝试执行以下操作：

{errors && (<ErrorMessage error={errors[name]} visible={touched[name]} />)}

如果这不是您想要的，请尝试找到不同的解决方案，但请始终记住，您不能像那样得到errors[name] ，您必须确保在这样做之前存在errors 。

希望这能解决您的问题，干杯！

Answer 2

您应该在 formik 组件中调用FormImagePicker ：

 <AppForm
    initialValues={{
      title: "",
      price: "",
      description: "",
      category: null,
      images: [],
    }}
    validationSchema={validationSchema}
    onSubmit={(values) => console.log(values)}
  >
    <FormImagePicker name="images" />      // ==> here <==

    <AppFormField maxLength={255} name="title" placeholder="Title" />
    
    <AppFormField
      keyboardType="numeric"
      maxLength={8}
      name="price"
      placeholder="Pirce"
      width={120}
    />
    <AppFormPicker
      item={categories}
      name="category"
      placeholder="Category"
      width={"50%"}
      PickerItemComponent={CategoryPickerItem}
      numberOfColumns={3}
    />