尝试获取 onclick 函数以从数组中删除项目（已被单击）。

但是，它不会删除任何内容。setListOfDocs 应该设置 listOfDocs 数组，其中单击的项目已消失（onClick 函数是一个过滤器）

它不起作用。控制台中没有错误。我不知道为什么它没有更新状态，以便 listOfDocs 是新的过滤数组（单击的项目已从数组中删除）。

我正在使用材料用户界面。

function NewMatterDocuments() {
    const [listOfDocs, setListOfDocs] = useState(['item1', 'item2', 'item3', 'item4']);
    const [disableButton, toggleDisableButton] = useState(false);
    const [displayTextField, toggleDisplayTextField] = useState('none');
    const [textInputValue, setTextInputValue] = useState();

    const buttonClick = () => {
        toggleDisableButton(true);
        toggleDisplayTextField('box');
    };
//this function works
    const handleEnter = ({ target }) => {
        setTextInputValue(target.value);
        const newItem = target.value;
        setListOfDocs((prev) => {
            return [...prev, newItem];
        });
        setTextInputValue(null);
    }; //

//this function does not work....which is weird because it pretty much
// does the same thing as the previous function except it deletes an item
// instead of adding it to the array. Why does the previous function work
// but this one doesnt?

    const deleteItem = ({ currentTarget }) => {
        const deletedId = currentTarget.id;
        const result = listOfDocs.filter((item, index) => index !== deletedId); 
        setListOfDocs(result)
    };

    return (
        <div>
            <Typography variant="body2">
                <FormGroup>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <Grid item xs={6}>
                                Document Type
                            </Grid>
                            {listOfDocs.map((item, index) => {
                                return (
                                    <ListItem id={index} secondaryAction={<Checkbox />}>
                                        <ListItemAvatar>
                                            <Avatar>
                                                <DeleteIcon id={index} onClick={deleteItem} />
                                            </Avatar>
                                        </ListItemAvatar>
                                        <ListItemButton>
                                            <ListItemText id={index} primary={item} />
                                        </ListItemButton>
                                    </ListItem>
                                );
                            })}
                            <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
                                <Button disabled={!disableButton ? false : true} color="inherit" onClick={buttonClick}>
                                    Add
                                </Button>
                                <ListItem sx={{ display: `${displayTextField}` }} id={uuid()} key={uuid()}>
                                    <TextField
                                        id="standard-basic"
                                        label="Additional Document"
                                        variant="standard"
                                        value={textInputValue}
                                        onKeyDown={(e) => {
                                            e.key === 'Enter' && handleEnter(e);
                                        }}
                                    ></TextField>
                                </ListItem>
                            </List>
                        </Grid>
                    </Grid>
                </FormGroup>
            </Typography>
        </div>
    );
}

export default NewMatterDocuments;

我试图将不起作用的函数更改为以下内容：

const deleteItem = ({ currentTarget }) => {
    setListOfDocs((prev) => {
        prev.filter((item, index) => index != currentTarget.id);
    });
};

它给出错误 “未捕获的类型错误：无法读取未定义的属性（读取'map'）” jsx 中的下一个 map 函数不起作用...