javascript - Nextjs useEffect 和 useState Hook 不适用于生产

Question

在我的 nextjs-app 中，我使用 useEffect 和 useState-hooks 来获取一些数据:

export default function PricingBlock({ data }) {
  const [pricingItems, setPricingItems] = useState()
  const [featuredItem, setFeaturedItem] = useState()

  useEffect(() => {
    const getPricingItems = async () => {
      const pricingItems = await request({ query: PRICING, variables: {} })
      const items = await pricingItems?.allSpecialistPages
      const featured = pricingItems?.specialistLandingpage?.card[0]
      setPricingItems(items)
      setFeaturedItem(featured)
   }
    getPricingItems()
  }, [featuredItem, pricingItems])

 return (
   <div>
     <div
       style={{
         backgroundColor: featuredItem?.backgroundColor?.hex,
         backgroundImage: `url(${featuredItem?.backgroundImage?.url})`,
         borderTop: '1px solid ' + featuredItem?.backgroundColor?.hex,
         borderLeft: '1px solid ' + featuredItem?.backgroundColor?.hex,
         borderRight: '1px solid ' + featuredItem?.backgroundColor?.hex,
       }}
     > ... </div>
   </div>
 )
}

当我在本地运行它时，它工作正常，但是当我运行 npm run build 时 - 我收到错误 Object is possibly 'undefined'. 指的是 特色项目

我也试过:

const [featuredItem, setFeaturedItem] = useState({}) - as an object

但随后出现错误 Property 'backgroundColor' does not exist on type '{}'。

我该如何解决这个问题？有人可以帮帮我吗？

Answer 1

这是由于 TypeScript 错误。这段代码:

const [featuredItem, setFeaturedItem] = useState()

没有定义featuredItem的类型，所以它没有第一个访问的属性(backgroundColor)。

要么修复它，要么在你的 next.config.js 中，临时添加以下内容:

module.exports = {
  ...
  typescript: {
    ignoreBuildErrors: true,
  },
}