无法在 RN 应用程序的 Formik 中控制台记录任何内容

Question

我在 formik 中使用 console.log() 从客户端获取数据的任何地方，它都不会在控制台中任何时候显示任何内容。

这是我的表单架构

const formSchema = yup.object({
    title: yup.string().required().min(3).max(50),
    image: yup.string().required(),
    homeType: yup.string().required(),
    price: yup.number().required(),
    yearBuilt: yup.number().required(),
    address: yup.string().required().min(10).max(50),
    description: yup.string().required().min(5),
})

这是调用表单组件的地方

<Formik
                initialValues={{
                    title:"",
                    image:"",
                    homeType:"",
                    price:"",
                    yearBuilt:"",
                    address:"",
                    description:""
                }}
                validationSchema={formSchema}
                onSubmit={(values) => {
                    console.log('values submitted', values);
                    setIsLoading(true)
                    dispatch(houseAction.createHome(values))
                        .then(() => {
                            setIsLoading(false)
                            Alert.alert(JSON.stringify("Created Successfully", [{ text: 'OK'}]))
                        })
                        .catch(() => {
                            setIsLoading(false)
                            Alert.alert(JSON.stringify("An error occured. Try again!", [{text: "OK"}]))
                        })
                }
            }
            >
                {(props)=>{
                    .....}

和处理提交按钮是分开的

<View style={styles.buttonContainer}>
                                <Button 
                                    title="Add Home"
                                    onPress={console.log('handle submit pressed', props.handleSubmit)}
                                />
                            </View>

聚苯乙烯

同样的代码在 Windows 中运行良好，并在控制台中显示错误。但在 mac 中，它在控制台中没有显示任何内容，每当我启动应用程序时都会出现此错误。

  * debugger-ui/debuggerWorker.aca173c4(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1107:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._explodedSourceMapForURL (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1058:35)
    at async Promise.all (index 1)
    at Server._symbolicate (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1009:26)
    at Server._processRequest (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:429:7)
Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/gourabsanyal/Desktop/house-listing-app/client/.: 

None of these files exist:
  * debugger-ui/debuggerWorker.aca173c4(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
  * debugger-ui/debuggerWorker.aca173c4/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
    at DependencyGraph.resolveDependency (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/lib/transformHelpers.js:129:24
    at Server._resolveRelativePath (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1107:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._explodedSourceMapForURL (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1058:35)
    at async Promise.all (index 1)
    at Server._symbolicate (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:1009:26)
    at Server._processRequest (/Users/gourabsanyal/Desktop/house-listing-app/client/node_modules/metro/src/Server.js:429:7)

Answer 1

看起来你在 Button 代码中有一个错误：

onPress={console.log('handle submit pressed', props.handleSubmit)}

您立即调用 console.log。 尝试：

onPress={() => console.log('handle submit pressed', props.handleSubmit)}

如果它有效，您应该知道创建这样的函数并不是最佳实践，因为每次重新呈现表单组件时我都会导致子组件重新呈现。请参阅 useCallback 了解如何避免这种情况

Answer 2

缓存出现错误，我watchman watch-del-all、expo start -c 清理了 expo 缓存，删除了节点模块，然后运行npm install 重新安装，它成功了。

对于错误，如果您在终端中没有得到任何东西，请检查您的浏览器中是否打开了远程调试，如果是，请从应用程序切换菜单中将其关闭，谷歌如何进入您的切换菜单（它在不同的操作系统中有所不同和开发套件）。它会被解决。

当远程调试器打开时，大部分控制台日志都将记录在浏览器调试器中。我花了一段时间才弄明白。