Reactjs 为什么这会创建一个带有React钩子的无限渲染循环？

我试图以字母顺序将啤酒名称呈现为H1元素，我对React钩子不熟悉，但这似乎会导致重新呈现循环

啤酒组件通过一系列啤酒作为道具从家庭组件中传递，家庭组件使用useEffect挂钩，我怀疑这可能是罪魁祸首，尽管我不确定

const Beer = ({ beer }) => {
  const [beers, setBeers] = useState([]);
  let rendered;
  if (beer === undefined) {
    rendered = <Spinner />;
  } else {
    rendered = beer.map(beer => beer.name);
    setBeers(rendered.sort());
    rendered = beers.map(beer => <h1>{beer}</h1>);
  }

  return <div>{rendered}</div>;
};

const Home = () => {
  const [beers, setBeers] = useState();
  useEffect(() => {
    const getBeers = async () => {
      const beerData = await fetch('https://api.punkapi.com/v2/beers');
      const beers = await beerData.json();
      console.log(beers);
      setBeers(beers);
    };
    getBeers();
  }, []);

  return (
    <div>
      <h1>Punk Beers</h1>
      <Beer beer={beers} />
    </div>
  );
};

constbeer=（{Beer}）=>{
常量[啤酒，啤酒]=使用状态（[]）；
让我们来呈现；
如果（啤酒===未定义）{
呈现=；
}否则{
rendered=beer.map（beer=>beer.name）；
setBeers（rendered.sort（））；
rendered=beers.map（beer=>{beer}）；
}
返回{rendered}；
};
常量Home=（）=>{
const[beers，setBeers]=useState（）；
useffect（（）=>{
const getBeers=async（）=>{
const beerData=等待取数（'https://api.punkapi.com/v2/beers');
const-beers=wait-beerData.json（）；
原木（啤酒）；
啤酒；
};
getBeers（）；
}, []);
返回(
朋克啤酒
);
};

---

我希望会有H1元素的渲染列表，但这会产生一个无休止的渲染循环。

当您调用

Beer

React内部的

setBeers

时，将使用为

beers

状态变量提供的更新值重新渲染组件（即重新执行函数）

您通常不需要将道具复制到这样的状态。如果您有一个组件在显示前在道具上执行昂贵的操作，您可能希望

在这种情况下，简单地排序

啤酒

并不昂贵，除非您的数组有成千上万个项目，因此无需进行优化

const-Beer=（{beers}）=>(
啤酒(
[…啤酒].sort（）.map（（啤酒，索引）=>
{啤酒}
)
) : (
)
)
常量Home=（）=>{
const[beers，setBeers]=useState（）；
useffect（（）=>{
const getBeers=async（）=>{
const beerData=等待取数（'https://api.punkapi.com/v2/beers');
const-beers=wait-beerData.json（）；
原木（啤酒）；
啤酒；
};
getBeers（）；
}, []);
返回(
朋克啤酒
);
};

我理解这一点，也非常感谢您的回答，但在不调用

挫折者的情况下，如何最好地更新状态并呈现名称？当道具更改时，将重新呈现组件<代码>啤酒

不需要任何地方政府。明白了，这很有道理。你的回答几次都很详细，我很感激，谢谢。