React Native渲染ListingEditScreen报Check the render method错误求解

问题排查修复方案 #

• 第一个问题：Yup校验Schema格式错误
  你当前定义的validationSchema是普通JS对象，Formik要求传入的校验规则必须是Yup.object()包裹的Schema实例，未包裹会导致Formik封装组件（也就是你引入的AppForm）渲染异常。同时你定义的category字段校验规则为字符串类型，但你选择分类时实际存入的是分类对象，也会引发后续校验错误。
  修复代码：

const validationSchema = Yup.object({
  title: Yup.string().required().min(1).label("Title"),
  price: Yup.number().required().min(1).max(10000).label("Price"),
  description: Yup.string().label("Description"),
  category: Yup.object().shape({
    id: Yup.number().required(),
    label: Yup.string().required()
  }).required().nullable().label("Category"),
});

• 第二个问题：AppPicker组件导出导入不匹配
  你在AppFormPicker中使用默认导入引入AppPicker：import AppPicker from "../AppPicker"，如果AppPicker组件使用的是命名导出（代码写法为export function AppPicker() {}而非export default function AppPicker() {}），导入后拿到的值就是undefined，渲染时就会触发你遇到的报错。
  修复方式：将AppPicker改为默认导出，或者将导入语句修改为import { AppPicker } from "../AppPicker"
• 第三个问题：确认Screen组件导出方式正确
  检查../components/Screen路径下的组件是否为默认导出，如果是命名导出，同样需要修改导入语句为import { Screen } from "../components/Screen"
• 第四个问题：确认formik依赖安装正常
  你用到了formik的useFormikContext钩子，如果formik未安装或者版本不兼容，也会导致组件渲染异常，可以重新安装依赖确认：npm i formik yup或者yarn add formik yup

内容的提问来源于stack exchange，提问作者Vuyi