javascript - 渲染没有更新？

Question

当我想删除用户时，我想显示一个确认弹出窗口。因此，当我按下删除按钮时，我希望出现弹出窗口。我所做的是根据海报变量呈现一个弹出窗口。如果为真则显示，如果为假则不显示。从逻辑上讲，当我按下删除按钮时，我应该显示我的弹出窗口，因此我修改变量并将其设置为 true，但我的弹出窗口没有显示

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import AuthentificationService from "../../api/AuthentificationService"
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Modal from "../Modal/Modal"

const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        maxWidth: 360,
        backgroundColor: theme.palette.background.paper,
    },
}));

export default function CheckboxList(props) {
    const classes = useStyles();
    let deleteIt = false;
    const [checked, setChecked] = React.useState([0]);

    const handleToggle = value => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);

    };

    const deleteUser = value => () => {
        AuthentificationService.deleteUser(value.id)
            .then((data) => {
            console.log(data);

        }) .catch((error) => {

        })
    }

    const confirmationDeleteUser = value => () => {
        deleteIt = true;
    }

    return (
        <List className={classes.root}>
            {props.response.map( test => {

                if (props.response.length <= 1) {

                } else {
                    return (
                        <ListItem key={test} role={undefined} dense button onClick={handleToggle(test)}>
                            <ListItemText primary={`${test.email}`}/>
                            <ListItemSecondaryAction>
                                <IconButton edge="end" aria-label="delete" onClick={confirmationDeleteUser(test)}>
                                    <DeleteIcon />
                                    <div>
                                        {deleteIt === false ?  "" : <Modal title="Confirmation" message="hey"/>}
                                    </div>
                                </IconButton>
                            </ListItemSecondaryAction>
                        </ListItem>
                    );
                }
            })}
        </List>
    );
}

当我的deleteIt变量等于true时，我想显示我的弹出窗口。为什么不起作用？我不明白什么？

Answer 1

仅当作为 prop 的值或组件状态的一部分发生更改时，React 才会重新渲染。在您的情况下，deleteIt 变量不是状态变量，因此即使您使用 confirmationDeleteUser 更改它，您的组件也不会重新渲染以触发弹出窗口。

尝试使用 useState 定义变量，如下所示:

const [deleteIt, setDeleteIt] = useState(false);

并更改 confirmationDeleteUser 中的代码以更改 deleteIt，如下所示:

setDeleteIt(true);

这应该会让事情朝着正确的方向发展。