Question

在下面的代码中，我期望执行 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,
   },
]

Answer 1

你可以用 useEffect 钩子

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

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

1 个答案: