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}
    />