React.map没有得到选择的值

Question

我有一个项目列表，它与 mui list 一起正确显示，我制作了一个按钮以便我可以编辑列表但是当我单击该项目时我得到的是最后一个项目的值而不是我的那个点击了。

这是我的功能：

const listItems = (id) => {
    if (!liste) {
        <div>no data</div>
    } else {
        return (
            <List>
                <ListItemButton onClick={() => handleClick(id)}>
                    <ListItemText primary={liste?.[id]?.navn} />
                    {handleOpen(id) ? <ExpandLess /> : <ExpandMore />}
                </ListItemButton>

                <Collapse in={handleOpen(id)} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        {liste
                            .filter((l) => l.tilhors_id === id)
                            .map((l) => {
                                return (
                                    <ListItemButton
                                        key={l.id}
                                        sx={{ pl: 4 }}
                                    >
                                        <ListItemText
                                            primary={
                                                <div>
                                                    {l.navn}
                                                </div>
                                            }
                                        />{l.beloeb}{console.log(l.id)}
                                        <EditPost open={openModal} handleOpen={handleOpenModal} id={l.id} navn={l.navn} beloeb={l.beloeb} />
                                        <Button>X</Button>
                                    </ListItemButton>
                                );
                            })}
                    </List>
                </Collapse>
                {liste.filter((k) => k.subtotal === id)
                    .map((k) => {
                        return (
                            <ListItemButton key={k.id}>
                                <ListItemText primary="Subtotal" />
                                {k.beloeb}
                            </ListItemButton>)
                    })}
            </List>
        );
    }
};

这是我的 EditPost：

<div>
        <ButtonIcon type='button' onClick={handleOpen} ><GrEdit/></ButtonIcon>
        <Modal tittel='Login' open={open} handleOpen={handleOpen} >
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div>
                        <Chip label={navn} color='info' />
                        <Controller
                            control={control}
                            name="beloeb"
                            render={({ field: { onChange, onBlur, value, ref } }) =>
                                <Text
                                    label="Beløb"
                                    onChange={onChange}
                                    onBlur={onBlur}
                                    selected={value}
                                />
                            }
                            type="number"
                            InputLabelProps={{
                                shrink: true,
                            }}
                        />
                    </div>
                        <CustomizedButtons type="submit" label="Gem" disabled={isLoading} />
                </form>
        </Modal>
    </div>

我只是不明白为什么它没有得到选择的值

编辑

Here is a codesandbox link

Answer 1

沙盒有帮助！我看了一下 DOM，每个呈现的列表项都声明了一个模态实例。因此，在初始渲染后，如果仅包含一个项目的第一个列表被展开，您将渲染预期的模态。如果展开前两个列表，您就会知道在 DOM 底部创建了八个模态实例（具有属性 role 值“presentation”的元素），因此打开了最新的实例。

我没有编写此解决方案，但我要做的是从 EditPost 中删除 Modal，这样您就不会渲染多个 Modal 实例；在 App.js 中呈现单个实例将是更合适的选择。从那里，通过 props 动态生成模态实例的内容。

React.map没有得到选择的值

React.map does not get the selected value

javascript

reactjs

material-ui