useState 創建無限循環

Question

我正在創建一個帶有 next 和 tailwind 的 web 應用程序，我需要在我使用 useState 的方法之間傳遞一系列數據，但是在加載時它會繼續加載荒謬的 RAM 使用率並且從不收費。

零件：

export default function Home({ nav, footer, content, edition }) {

const [activeEdition, setActiveEdition] = useState({
 background: '',
 title: '',
 prize: '',
 sponsors: [], 
});

return (
 <div>
  
  {edition.map((result) => {
    
    const { data } = result;  

    if(data.active){
      setActiveEdition({
        background: data.edition_background.url,
        title: data.edition_title,
        prize: data.prize.url,
        sopnsors: data.body[0].items,
      });
    }

    return (
      null
    )
  })}

  {content.map((result) => {
    const active = activeEdition
    const { data } = result

    return (
      <Hero
        key = {data.id}
        active = {active}

      />
    )
  })}
  
</div>
 );
}

執行：

function Hero({heroData, active, register}) {
    const background = {
        backgroundImage: `url('${active}')`
    }
    
    console.log(active)

    return (
        <div>
            <h1>asdas</h1>
        </div>
    )
}

export default Hero

更新：添加了完整的組件以便更好地理解

Answer 1

將 map 移動到 useEffect 掛鈎中，也不需要 map，因為您不轉換數據，只需根據值進行迭代並進行更改。 還添加了一個中斷，因為我假設只有一個項目符合標准。

useEffect(() => {
  for (const result of edition) {

    const { data } = result;  

    if(data.active){
      setActiveEdition({
        background: data.edition_background.url,
        title: data.edition_title,
        prize: data.prize.url,
        sopnsors: data.body[0].items,
      });
      break;
    }

  }}, [edition]);

就像我在評論中提到的那樣：您正在創建一個無限循環，因為您在渲染時修改了 state。 您想要的是根據版本更改更新 state。 這個副作用應該是在useEffect中完成的。