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

Answer 2

很確定這會解決它：

interface FeaturedItem {
    backgroundColor: string;
    //other props if needed...
}
const [featuredItem, setFeaturedItem] = useState<FeaturedItem>();

• 在useState上沒有泛型，typescript 將 featuredItem 指定為 undefined

Answer 3

如果不使用 Typescript，您可以嘗試為featuredItem狀態提供默認值。

const defaultValue = {
  backgroundColor: {
    url: '',
    hex: ''
  },
  backgroundImage: ''
};
const [featuredItem, setFeaturedItem] = useState(defaultValue)