Question

我正在使用HOC接收输入（来自用户的多个图像和文本）的表单。下面是我的表单组件。

import React from "react";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Alert from "@material-ui/lab/Alert";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { Snackbar, IconButton } from "@material-ui/core";
import { Loading, Snackbars, UIButton, UITextField } from "../UI/index";
import {
  Paper,
  makeStyles,
  Button,
} from "@material-ui/core";

function Gallery(props) {
  let {
    submitHandler,
    selectImages,
    message,
    galleryForm,
    inputChangedHandler,
  } = props;

  return (
    <div>
      <Paper
        elevation={3}
        style={{ padding: "20px" }}
      >
        <form
          onSubmit={submitHandler}
          noValidate
          id="galleryForm"
        >
          <Grid container spacing={3}>
            <Grid item xs={12} md={6}>
              <UITextField
                name="imageTitle"
                label="Image Title"
                value={galleryForm.imageTitle.value}
                onChange={(event) => inputChangedHandler(event, "imageTitle")}
                error={galleryForm.imageTitle.invalid}
                helperText={galleryForm.imageTitle.helperText}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <Grid container>
                <Grid>
                  <TextField
                    id="standard-basic"
                    fullWidth
                    label="Select File To Upload"
                    value={message}
                    error={galleryForm.images.invalid}
                    helperText={galleryForm.images.helperText}
                  />
                </Grid>
                <Grid>
                  <input
                    accept=".jpg , .png, .jpeg"
                    className={classes.input}
                    style={{ display: "none" }}
                    id="raised-file"
                    multiple
                    type="file"
                    onChange={selectImages}
                  />
                  <label htmlFor="raised-file">
                    <Button
                      variant="contained"
                      style={{
                        background: "#D3D3D3",
                        color: "black",
                        fontSize: "15px",
                        borderRedius: "4px",
                      }}
                      component="span"
                    >
                      UPLOAD PHOTOS
                    </Button>
                  </label>
                </Grid>
              </Grid>
            </Grid>
            <Grid className={classes.center}>
              <UIButton
                type="submit"
                variant="contained"
                color="primary"
                size="large"
                className={classes.submit}
              >
                create gallery
              </UIButton>
            </Grid>
          </Grid>
        </form>
      </Paper>
    </div>
  );
}

export default enhancer(Gallery);

下面是我的HOC（增强程序），它包含Gallery组件

import React, { useEffect, useState } from "react";
import { compose } from "redux";
import Gallery from "./index";
import galleryFiled from "./galleryField";

export let enhancer = compose((Gallery) => ({ ...props }) => {
  const [galleryForm, setGalleryForm] = useState(galleryFiled);
  const [message, setMessage] = useState("");

  const selectImages = (event) => {
    const updatedForm = {
      ...galleryForm,
    };
    console.log("check:", galleryForm);
    for (var i = 0; i < event.target.files.length; i++) {
      if (event.target.files.item(i).name.match(/\.(jpg|jpeg|png)$/)) {
        updatedForm.images.value.push(event.target.files.item(i));
      }
    }

    setGalleryForm({ ...updatedForm });
    let message = `${updatedForm.images.value.length} valid image(s) selected`;
    console.log(galleryForm);
    setMessage(message);
  };

  const inputChangedHandler = (event, inputIdentifier) => {
    const updatedForm = {
      ...galleryForm,
    };
    console.log(updatedForm);
    updatedForm[inputIdentifier].value = event.target.value;
    updatedForm[inputIdentifier].invalid = false;
    updatedForm[inputIdentifier].helperText = "";
    console.log(updatedForm);
    setGalleryForm({
      ...updatedForm,
    });
    console.log(galleryForm);
  };

  const clearForm = (event) => {
    let allFormKeys = Object.keys(galleryForm);
    let formData = { ...galleryForm };
    allFormKeys.forEach((formKey) => {
      if (formKey == "images") {
        formData[formKey].value = [];
        formData[formKey].invalid = false;
        formData[formKey].helperText = "";
      } else {
        formData[formKey].value = "";
        formData[formKey].invalid = false;
        formData[formKey].helperText = "";
      }
    });
    setMessage("");
    setGalleryForm(formData);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    console.log("submit", galleryForm);
    let updatedForm = { ...galleryForm };
    console.log("update", updatedForm);
      console.log("final form", galleryForm);
      clearForm();
  };

  return (
    <Gallery
      {...props}
      {...{
        submitHandler,
        selectImages,
        message,
        galleryForm,
        inputChangedHandler,
      }}
    />
  );
});

export default enhancer;

因此，每当我第一次单击“上传图像”按钮时，我都会使用galleryForm的临时副本，然后在selectImage按钮函数中使用useState挂钩将正确的文件更新到galleryForm之后。

所以我的问题是，当我最初在打印更新的galleryForm时打印画廊的临时副本时，甚至在功能的后续阶段也要更新表单。

submitHandle函数面临同样的问题，即使我最后一次调用函数，clearForm函数也会更新galleryForm，这是由于我丢失了表单数据，即使我最初打印galleryForm之后也得到了空表单。

Answer 1

您正在使用spreadSyntax克隆galleryForm，但是必须注意，spread语法只会对对象进行浅表复制。新对象中的嵌套值仍然共享引用，并且当您尝试更新嵌套值时，获取的值也会反映在原始状态中

正确的更新方法是在如下所示的每个嵌套级别克隆值

const selectImages = (event) => {
    console.log("check:", galleryForm);
    const imagesValue = [];
    for (var i = 0; i < event.target.files.length; i++) {
      if (event.target.files.item(i).name.match(/\.(jpg|jpeg|png)$/)) {
        imagesValue.push(event.target.files.item(i));
      }
    }

    // Update nested state
    setGalleryForm(prevGalleryForm => ({ 
         ...prevGalleryForm, 
         images: {
              ...prevGalleryForm.images, 
              value: prevGalleryForm.images.concat(imagesValue)
         } 
    }));
    let message = `${imagesValue.length} valid image(s) selected`;
    console.log(galleryForm);
    setMessage(message);
  };

  const inputChangedHandler = (event, inputIdentifier) => {
    const updatedForm = {
      ...galleryForm,
      [inputIdentifier]: {
         ...galleryForm[inputIdentifier],
         value: event.target.value,
         invalid: false,
         helperText:"",
      }
    };
    console.log(updatedForm);
    setGalleryForm(updatedForm);
    console.log(galleryForm);
  };

  const clearForm = (event) => {
    let allFormKeys = Object.keys(galleryForm);
    let formData = { ...galleryForm };
    allFormKeys.forEach((formKey) => {
      if (formKey == "images") {
        formData[formKey].value = [];
        formData[formKey].invalid = false;
        formData[formKey].helperText = "";
      } else {
        formData[formKey].value = "";
        formData[formKey].invalid = false;
        formData[formKey].helperText = "";
      }
    });
    setMessage("");
    setGalleryForm(formData);
  };

在React钩子中执行之前更新状态

1 个答案: