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中完成的。