尽可能清晰地创建尽可能多的独特美国的最佳方法？

Question

我试图弄清楚如何尽可能干净地创建尽可能多的 useState （牢记 DRY 原则）。

我试图解决的问题是，目前我有一个菜单项列表及其相对价格。该网站允许客户使用下拉菜单来选择他/她想要的该商品的订单数量。

我的问题是，我知道对于一个菜单项，我可以使用 useState 来制作类似键值对的内容

const [order, setOrder] = useState({});

，其中键值对将是 name 和 number of order< /code>

现在我的问题是：假设我有 N 个菜单项，如何根据需要创建尽可能多的 const [order, setOrder] = useState({}) ？我知道我不能将 useState 放入 for 循环中，所以这是不可能的（？）

下面是我正在尝试解决的代码：

export default function MenuPage() {

    // getting the menu items and prices from firebase

    const [menuItems, setMenuItems] = useState({});
    React.useEffect(async () => {
        const result = await querySnapShot();
        result.forEach((doc) => {
            setMenuItems(doc.data());
        })
    }, []);

    return(
       
       {
            Object.keys(menuItems).map((key) => {
                return (
                    <Box
                        key={key}
                        display='flex'
                        flexDirection='row'
                        alignItems='center'
                        justifyContent='center'
                        textAlign='center'
                        borderBottom='0.5px solid black'
                        sx={{ my: 10, mx: 10 }}>
                        <Box flex={1} textAlign='center' sx={{ fontSize: '35px', }}>
                            {key}:
                        </Box>
                        <br />
                        <Box flex={1} textAlign='center' sx={{ fontSize: '25px' }}>
                            ${menuItems[key]}0
                        </Box>
                        <Box flex={1} display='flex' flexDirection='row' alignItems='center' justifyContent='end' sx={{ width: '50px' }}>
                            {/* <Typography flex={0} sx={{ mr: 5, fontFamily: 'Poppins', fontSize: '25px' }}>Order: </Typography> */}
                            <Box flex={0.5} textAlign='center'>
                                <FormControl fullWidth>
                                    <InputLabel id="demo-simple-select-label">Order</InputLabel>
                                    <Select
                                        value={order}
                                        name={key}
                                        label="Order"
                                        onChange={handleChange}>
                                        <MenuItem value={1}>1</MenuItem>
                                        <MenuItem value={2}>2</MenuItem>
                                        <MenuItem value={3}>3</MenuItem>
                                    </Select>
                                </FormControl>
                            </Box>
                        </Box>

                    </Box>
                );
            })
        }

    );

}

Answer 1

假设您有一个数组作为响应，您可以：

const data = [
        { name: 'Foo', value: 'bar' },
        { name: 'Foo2', value: 'bar2' },
      ];

      setState(data.map({ name: 'Foo', value: 'bar' }));

      // or if no change has to be done you can set it directly into the state
      setState(data);