Javascript 为什么在forEach循环完成之前执行代码？

在下面的代码中，我希望执行

forEach

循环，然后使用从循环中创建的数据初始化

selectedGroup

状态

渲染组件时，循环工作正常，但

selectedGroup

状态未初始化。似乎

selectedGroup

正在尝试在循环完成之前初始化。有什么想法吗

问题代码：

const MenuContent = ({ items, modifiers }) => {
  let groups = [];
  items.forEach((item) => {
    !groups.includes(item.group) && groups.push(item.group);
  });

  const [selectedGroup, setSelectedGroup] = useState(groups[0]);

  return (
    <View style={styles.container}>
      <Text>{selectedGroup}</Text>
    </View>
  );
};

Array [
   Object {
       "86": false,
       "description ": null,
       "group": "Liquors",
       "ingredients ": null,
       "modifiers": Array [
      "gh5OdUAQC0bCr9O0HrF8",
       ],
       "name": "Smirnoff",
       "price": 350,
   },
   Object {
       "86": false,
       "description": "Vodka, Passionfruit, Ginger, Lemon",
       "group": "Cocktails",
       "ingredients ": null,
       "modifiers": Array [
         "hzxrMy17xrikXA0yumYB",
         "sLrkn3QXOgOzbHobdIRG",
       ],
       "name": "Passionfruit Mule",
       "price": 1400,
   },
]

你可以用胡克

---

谢谢你的回复。我刚刚尝试了你的解决方案，但我得到了一个错误“找不到变量组”-我认为它仍在尝试在

forEach

循环完成之前设置

selectedGroups

状态。如果工作正常，请检查叉子。你是对的，我的错误。两种解决方案都有效，我没有正确地传递项目。谢谢你的帮助。

const MenuContent = ({ items, modifiers }) => {

  const [selectedGroup, setSelectedGroup] = useState(null);

  useEffect(()=>{
         let groups = [];
         items.forEach((item) => {
           !groups.includes(item.group) && groups.push(item.group);
         });
         setSelectedGroup(groups[0])
   },[items])

  return (
    <View style={styles.container}>
      <Text>{selectedGroup}</Text>
    </View>
  );
};

 return (
        <View style={styles.container}>
          {selectedGroup && <Text>{selectedGroup}</Text>}
        </View>
      )