next.js 下一个js-类型错误：无法读取未定义的属性(阅读“title”)

km0tfn4u 于 2023-02-08 发布在其他

关注(0)|答案(2)|浏览(171)

我使用nextjs作为框架，尝试使用slug显示标题
我在[slug].js文件中的代码是：

import React, { useState } from 'react'
import { useRouter } from 'next/router'
const slug = ({proDetail}) => {
  const router = useRouter();
  const { slug } = router.query
  console.log(proDetail[slug].title)
  return (<div>title:{proDetail[slug].title}</div>)
}
export default slug

在上面的代码（第3行）中，proDetails是_app. js中的一个对象，它是[slug].js的一个属性

export default function App({ Component, pageProps }) {
   var proDetail = {
     s1: {  title: "Tomato", disc:"lorem" },
     s2: {  title: "Pepper", disc:"lorem" },
     s3: {  title: "Lettuce", disc:"lorem" },
     s4: {  title: "Carrot", disc:"lorem" },
     s5: {  title: "Radish", disc:"lorem" }
   }
    return <>
       <Component proDetail={proDetail} {...pageProps}/>
     </>
  }

我希望我的标题在不同URL的对象中显示相应的标题http：//localhost：3000/s {i}（其中“i”是从1到5的数字，因为我的proDetail对象中只有s1到s5键）
我的动机是改变标题，如果我改变我的网址，但得到**类型错误：无法读取undefined的属性（阅读'title'）**如果我使用proDetail[“s2”].title代替proDetail[slug].title，则我的标题将显示在网页上，但这只显示键：s2的标题

import React, { useState } from 'react'
import { useRouter } from 'next/router'

const slug = ({proDetail}) => {
  const router = useRouter();
  const { slug } = router.query
  return (<div>title:{proDetail["s2"].title}</div>)
}

但显示标题：Pepper甚至会出现在http：//localhost：3000/s（anyValue）中，因为我更改了HTML。
如何解决此类型错误：无法读取未定义的属性（阅读“标题”）。我不想为每个标题创建单独的页面，并希望与鼻涕虫工作。
我知道控制台语句和html是在定义slug值之前呈现的，但是如何克服这个错误呢

next.js

来源：https://stackoverflow.com/questions/75338031/nextjs-typeerror-cannot-read-properties-of-undefined-reading-title

2条答案

按热度按时间

gc0ot86w1#

您使用useEffect的方式几乎是正确的，但是您需要验证slug值是否为空。

useEffect(() => {
   if(slug) {
      console.log(proDetail[slug].title);
   }
}, [slug])

原因是slug不可用时，第一次渲染也会触发useEffect。因此，您会得到相同的错误。
您还可以使用router.isReady，它在next/router包中定义，如下所示

import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
const Slug = ({proDetail}) => {
  const [slugValue, setSlugValue] = useState();
  const router = useRouter();
  const { slug } = router.query;
   
  useEffect(() => {
    if(router.isReady) {
       setSlugValue(slug);
    }
  }, [router.isReady]);

  if(!slugValue) {
     return null;
  }

  return (<div>title:{proDetail[slugValue]?.title}</div>)
}
export default Slug

这种逻辑可以帮助您克服在某些情况下仍然允许slug为空的问题。

请注意，我将组件名称从slug更改为Slug，以避免变量重复，您在组件中也使用了该变量。*

赞(0）回复(0）举报 2023-02-08

eeq64g8w2#

import React from 'react'
import { useRouter } from 'next/router'

const slug =(({proDetail}) => {
  const router = useRouter();
  let {slug} =router.query
  console.log(slug)
  return (<div>title:
    {slug === undefined ? 'Loading...' : JSON.stringify(proDetail[slug].title)} 
    </div>)
})
export default slug

我知道只有当我的slug没有被定义时，我才能评估proDetail[slug].title

赞(0）回复(0）举报 2023-02-08

我来回答

next.js 下一个js-类型错误：无法读取未定义的属性(阅读“title”)

2条答案

相关问题

热门标签

最新问答