reactjs - 收到警告错误：验证 DOM 嵌套后代

Question

我正面临这个问题。我附上了代码，错误在 DOM 中。试图以各种方法和方式解决问题，但没有解决。
我不知道为什么会出现 DOM 嵌套我不明白代码中的确切问题。谁能帮忙解决

import React, { useRef, useState } from "react";
import AvatarEditor from "react-avatar-editor";
import Avatar from "@material-ui/core/Avatar";
import {MuiThemeProvider} from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
import { Grid, Button, Paper } from "@material-ui/core";
import ImageIcon from "@material-ui/icons/Image";

export default function Image() {
    const [ state, setState ] = useState({
        cropperOpen: false,
        img: null,
        remove: "",
        zoom: 1,
        croppedImg: "",
    });

    const editorRef = useRef(null);
    const inputRef = useRef(null);

    function handleZoomSlider(event, value) {
        setState((prev) => ({ ...prev, zoom: value }));
    }

    function handleRemove() {
        setState((prev) => ({ ...prev, croppedImg: null }));
    }

    function handleFileChange(e) {
        window.URL = window.URL || window.webkitURL;
        let url = window.URL.createObjectURL(e.target.files[0]);

        inputRef.current.value = "";
        setState((prev) => ({ ...prev, img: url, cropperOpen: true }));
    }

    function handleCancel() {
        setState((prev) => ({ ...prev, cropperOpen: false }));
    }

    function handleSave() {
        if (editorRef.current) {
            const canvasScaled = editorRef.current.getImageScaledToCanvas();
            const croppedImg = canvasScaled.toDataURL();

            setState((prev) => ({ ...prev, cropperOpen: false, croppedImg }));
        }
    }

    return (
        <MuiThemeProvider>
            <Grid container spacing={2} alignItems="center">
                <Grid item xs={2} sm={2} md={2} lg={2} xl={2}>
                    <Avatar style={{ width: "90px", height: "90px" }} src={state.croppedImg} />
                </Grid>

                <Grid item xs={5} sm={5} md={4} lg={4} xl={3}>
                    <input
                        accept="image/*"
                        ref={inputRef}
                        onChange={handleFileChange}
                        id="Upload an Image"
                        type="file"
                        multiple
                        hidden
                    />
                    <label htmlFor="Upload an Image">
                        <Button fullWidth variant="contained" color="secondary"  component={"span"}>
                            Upload an Image
                        </Button>
                    </label>
                </Grid>

                <Grid item xs={5} sm={5} md={4} lg={3} xl={3}>
                    <input accept="image/*" onChange={handleRemove} id="Remove Image" multiple hidden />
                    <label htmlFor="Remove Image">
                        <Button fullWidth variant="outlined" color="secondary"  component={"span"} onClick={handleRemove}>
                            Remove Image
                        </Button>
                    </label>
                </Grid>
            </Grid>

            {state.cropperOpen && (
                <Paper
                    style={{
                        position: "absolute",
                        left: "440px",
                        right: "100px",
                        top: "100px",
                        width: "30%",
                        background: "rgba(200,200,200,.8)",
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
                        zIndex: "1",
                    }}
                >
                    <Grid container justify="center">
                        <Grid
                            item
                            xs={12}
                            style={{
                                fontFamily: "Campaign",
                                fontSize: "20px",
                                fontWeight: "bold",
                                fontStretch: "normal",
                                fontStyle: "normal",
                                lineHeight: "1.6",
                                letterSpacing: "normal",
                                textAlign: "center",
                                color: "#181d1e",
                                height: "60px",
                                padding: "20px",
                                background: "#FFFFFF",
                            }}
                        >
                            <span>Create Profile Image</span>
                        </Grid>
                    </Grid>

                    <AvatarEditor
                        ref={editorRef}
                        image={state.img}
                        width={370}
                        height={400}
                        disableBoundaryChecks={true}
            disableHiDPIScaling={true}
                        opacity={10}
                        border={1}
                        color={[ 255, 255, 255, 0.6 ]}
                        scale={state.zoom}
                        borderRadius={200}
                    />

                    <Grid container justify="center" style={{ background: "rgba(255,255,255,0.8)" }}>
                        <Grid item xs={8} display="flex" justify="center" alignItems="center" container height="55px">
                            <ImageIcon />
                            <Slider
                                min={1}
                                max={10}
                                step={0.1}
                                value={state.zoom}
                                onChange={handleZoomSlider}
                                style={{ width: "150px", marginLeft: "10px" }}
                            />
                            <ImageIcon fontSize="large" />
                        </Grid>
                    </Grid>

                    <Grid
                        container
                        justify="space-evenly"
                        alignItems="center"
                        style={{ background: "#FFFFFF", height: "60px" }}
                    >
                        <Grid item xs={5} sm={5}>
                            <Button
                                fullWidth
                                type="button"
                                variant="outlined"
                                color="primary"
                                onClick={handleCancel}
                                width="100%"
                            >
                                Cancel
                            </Button>
                        </Grid>

                        <Grid item xs={5} sm={5}>
                            <Button
                                fullWidth
                                type="button"
                                variant="contained"
                                color="secondary"
                                onClick={handleSave}
                                width="100%"
                            >
                                Save
                            </Button>
                        </Grid>
                    </Grid>
                </Paper>
            )}
        </MuiThemeProvider>
    );
}

标签： reactjsreact-reduxreact-router