我该如何解决以下警告："Can't perform a React state update on an unmounted component"

Question

编辑：我一直在尝试在我的代码中实现 ，但我很困惑这种方法在我的代码中的转换方式。我一直在尝试将该修复应用到我的 updateDose 函数，但它不起作用。

我正在使用 React、Material UI、React Hook Form 和 Yup 创建一个应用程序。

我有两个对话框，一个用于每张卡片的“编辑剂量”按钮和“删除药物”按钮。在“编辑剂量”对话框中，用户将新剂量输入到表格中。

如果我多次尝试更新药物剂量（第一次更新显示没有错误，然后第二次显示此错误），我会收到以下警告...

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我搜索了其他教程，试图根据其他示例找到修复方法，但我没有任何运气。非常感谢您，这是我的相关代码...

const Medication = ({medication}) => {
        const {handleSubmit, control, formState} = useForm({
            mode: "onChange",
            resolver: yupResolver(validationSchema)
        });

        // This handles the update medication dialog
        const [openUpdate, setOpenUpdate] = useState(false);
        const handleClickOpenUpdate = () => {
            setOpenUpdate(true);
        };
        const handleCloseUpdate = () => {
            setOpenUpdate(false);
        };

        // Function for the update dose button
        function updateDose(medicationId, parsedMedications, data) {
            let medication;
            let index;

            for (let i = 0; i < parsedMedications.length; i++) {
                if (parsedMedications[i].id === medicationId) {
                    medication = parsedMedications[i];
                    index = i;
                }
            }

            medication.dose = data.dose;
            parsedMedications[index] = medication;
            localStorage.setItem("medications", JSON.stringify(parsedMedications));

            // This forces the dialog to close
            setOpenUpdate(false);
        }

        return (
            <Box>
                <Card sx={cardSx}>
                    <CardContent>
                        <Typography sx={typographyMedicationSx} variant="h5">
                            Medication: {medication.medication}
                        </Typography>
                        <Typography sx={typographyMedicationSx} variant="h5">
                            Dose: {medication.dose} mg
                        </Typography>
                    </CardContent>
                    <Box>
                        <Button onClick={() => handleClickOpenUpdate()} size="large"
                                sx={buttonSx}
                                variant="contained">Edit
                            Dose</Button>
                        <Button onClick={() => handleClickOpen()} color="error"
                                size="large"
                                sx={buttonSx} variant="contained">Delete
                            Med </Button>
                    </Box>
                </Card>

                {/* Update medication dialog */}
                <Dialog
                    open={openUpdate}
                    onClose={handleCloseUpdate}
                    TransitionComponent={Transition}
                >
                    <DialogTitle sx={dialogTitleSx}>
                        {handleCloseUpdate ? (
                            <IconButton
                                aria-label="close"
                                onClick={handleCloseUpdate}
                                sx={iconButtonSx}
                            >
                                <CloseIcon/>
                            </IconButton>
                        ) : null}
                    </DialogTitle>

                    <form
                        onSubmit={handleSubmit((data) => updateDose(medication.id, parsed, data))}
                        noValidate>
                        <Typography sx={updateDoseTypographySx} variant="h4">
                            Update dose
                        </Typography>

                        <Box
                            sx={boxSx}
                        >
                            <Controller
                                name="dose"
                                control={control}
                                defaultValue={""}
                                render={({field: {ref, ...field}, fieldState: {error}}) => (
                                    <Autocomplete
                                        {...field}
                                        autoHighlight
                                        disableClearable
                                        isOptionEqualToValue={(option, value) => option.id === value.id}
                                        id="dose-autocomplete"
                                        onChange={(event, value) => field.onChange(value.label)}
                                        options={doseSuggestions}
                                        renderInput={(params) => (
                                            <TextField
                                                required
                                                error={!!error}
                                                helperText={error?.message}
                                                id="dose"
                                                label="Dose"
                                                name="dose"
                                                type="numeric"
                                                inputRef={ref}
                                                {...params}
                                            />
                                        )}
                                    />
                                )}
                            />

                            <Button disabled={!formState.isValid} size="large"
                                    sx={formButtonSx} type="submit"
                                    variant="contained">Submit</Button>
                        </Box>
                    </form>
                </Dialog>
            </Box>
        )
    };

    const medications = parsed.map((medication, index) => {
        return (<Medication medication={medication} key={"medication" + index}/>)
    });

Answer 1

slack 社区的某个人帮我弄明白了！我需要将其添加到对话框中... keepMounted={true}