Nextjs useEffect 和 useState 挂钩在生产中不起作用

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'.featuredItem

我也尝试这样做：

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,
  },
}