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

将地图移动到 useEffect 钩子中，也不需要地图，因为您不转换数据，只需迭代并根据值进行更改。还添加了一个中断，因为我假设只有一项符合条件。


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]);

就像我在评论中提到的那样：您正在创建一个无限循环，因为您在渲染时修改了状态。您想要的是根据版本更改更新状态。这个副作用应该在useEffect中完成。

useState 创建无限循环

useState create infinite loop

javascript

web

reactjs

next.js

use-state