应用程序错误:出现客户端异常(有关更多信息，请参见浏览器控制台)。

您所在的位置：网站首页 › 谷歌浏览器应用程序错误发生客户端异常 › 应用程序错误:出现客户端异常(有关更多信息，请参见浏览器控制台)。

应用程序错误:出现客户端异常(有关更多信息，请参见浏览器控制台)。

2024-07-01 09:51| 来源: 网络整理| 查看: 265

Nextjs博客应用程序

当前查看：Application error: a client-side exception has occurred (see the browser console for more information).，我看到了在AWS扩容控制台上创建部署中的post时出现的错误，DynamoDB无法重定向到提交时创建的post，但我可以在提交时本地查看post。错误只出现一次部署到DynamoDB。

任何关于为什么会发生这种情况的迹象都是非常感谢的。

代码语言：javascript复制///create-post.js import { withAuthenticator } from '@aws-amplify/ui-react' import { useState, useRef } from 'react' import { API, Storage } from 'aws-amplify' import { v4 as uuid } from 'uuid' import { useRouter } from 'next/router' import SimpleMDE from "react-simplemde-editor" import "easymde/dist/easymde.min.css" import { createPost } from '../graphql/mutations' import MySelect from '../components/Autocomplete' import { useForm } from "react-hook-form"; import { ErrorMessage } from '@hookform/error-message'; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; const initialState = { title: '', content: '', category: '', countries: '', select: '', date: '', createdAt: new Date().toISOString()} function CreatePost() { const [startDate, setStartDate] = useState(new Date()); const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); const [post, setPost, state] = useState(initialState) const hiddenFileInput = useRef(null); const { title, content, category, countries, select, date, createdAt } = post const router = useRouter() function onChange(e) { setPost(() => ({ ...post, [e.target.name]: e.target.value })) } console.log('setPost', post.countries ? countries.label : "") async function createNewPost() { if ( !title || !content || !category || !countries || !select || !date || !createdAt ) return const id = uuid() post.id = id await API.graphql({ query: createPost, variables: { input: post }, authMode: "AMAZON_COGNITO_USER_POOLS" }) router.push(`/posts/${id}`) } return ( Create New Article

Enter Title:

{errors.title && ( This field is required )}

Enter Category:

{errors.category && ( This field is required )}

Select Created Date:

setPost({...post, date})} name="date" placeholder="Created date" autoComplete="true" className="visible focus:outline-black outline-black" /> {errors.date && ( This field is required )}

Select Author's Country:

setPost({ ...post, countries: onChange.value })} value= {post.countries} className="m-6" placeholder="Countries Select..." /> {errors.countries && ( This field is required )}

Select Blog's Category

setPost({ ...post, select: onChange.label})} value= {post.select} className="m-6" placeholder="select Select..." /> {errors.select && ( This field is required )}

Enter Blog Content:

setPost({ ...post, content: value })} /> {errors.content && ( This field is required

Please check all fields are filled in & wait 3 seconds before refreshing the page

)} Save Article ) } const selectCategoryOptions = [ { label: "Sport" }, { label: "News" }, { label: "Weather" }, { label: "Other" } ]; const options = [ { label: 'Africa', value: 'Africa' }, { label: 'USA', value: 'USA' }, { label: 'Asia', value: 'Asia' }, { label: 'Europe', value: 'Europe' }, { label: 'Oceania', value: 'Oceania' }, ] export default withAuthenticator(CreatePost)代码语言：javascript复制//pages/posts/[id].js import { API, Storage } from 'aws-amplify' import { useState, useEffect } from 'react' import { useRouter } from 'next/router' import ReactMarkdown from 'react-markdown' import { listPosts, getPost } from '../../graphql/queries' export default function Post({ post }) { const router = useRouter() if (router.isFallback) { return Loading... } return ( Title: {post.title} Category: {post.category}

Selected Category Name: {post.select }

Content: {post.content} Blog gerenated date created at: {new Date(post.createdAt).toDateString()} User date created at: {new Date(post.date).toDateString()}

Author's Country: {post.countries }

Author: {post.username}

) } export async function getStaticPaths() { const postData = await API.graphql({ query: listPosts }) const paths = postData.data.listPosts.items.map(post => ({ params: { id: post.id }})) return { paths, fallback: true } } export async function getStaticProps ({ params }) { const { id } = params const postData = await API.graphql({ query: getPost, variables: { id } }) return { props: { post: postData.data.getPost }, revalidate: 60 } }

【本文地址】

应用程序错误:出现客户端异常(有关更多信息，请参见浏览器控制台)。

应用程序错误:出现客户端异常(有关更多信息，请参见浏览器控制台)。

今日新闻

推荐新闻