警告：“input”上的“value”属性不应为空

Question

我有这个文件，通过这个文件我编写了对话框，我创建了一个产品，因为这个项目是一个电子商务项目，我在这个对话框中上传了一张图片，我得到了这个错误，但我没有知道如何解决：

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components

此文件包含对话框和用于创建产品的整个界面

import * as React from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { makeStyles } from "@mui/styles";
import Image from "next/image";
import axios from "axios";

const useStyles = makeStyles({
  button: {},
  buttonUpload: {
    backgroundColor: "#ffc400 !important",
    color: "white  !important",
  },
  diaButton: {},
});

export default function FormDialog() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const newLocal = false;
  const [selectedFile, setSelectedFile] = React.useState(newLocal);
  const [title, setTitle] = React.useState("");
  const [price, setPrice] = React.useState(null);
  const [description, setDescription] = React.useState("");
  const [category, setCategory] = React.useState("");

  function fileSelectedHandler(event) {
    console.log(event.target.files[0]);
    setSelectedFile(event.target.files[0]);
  }

  const fileUploadHandler = async () => {
    // console.log("title: ", title);
    // console.log("price: ", price);
    // console.log("description: ", description);
    // console.log("image: ", image);
    // console.log("category: ", category);
    console.log(selectedFile);
    const fd = new FormData();
    fd.append("image", selectedFile);
    // I think what you missing is the header to inform the axios as multi part request
    fd.append("data", JSON.stringify({ title, price, description, category }));
    await axios.post("https://fakestoreapi.com/products", fd, {
      headers: {
        "Content-type": "multipart/form-data",
      },
    });

    // console.log(response);
  };
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const onSendMsg = () => {
    handleClose();
    fileUploadHandler();
  };

  return (
    <div>
      <Button
        style={{
          padding: 14,
          backgroundColor: "#ffc400 !important",
          color: "white",
        }}
        onClick={handleClickOpen}
      >
        Add New Product
      </Button>

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Create Product</DialogTitle>

        <DialogContent>
          <DialogContentText style={{ marginBottom: 14 }}>
            Please fill in the fields to create a product.
          </DialogContentText>

          <input
            type="file"
            id="select-image"
            style={{ display: "none" }}
            onChange={fileSelectedHandler}
          />
          <label htmlFor="select-image">
            <Button variant="contained" color="primary" component="span">
              Upload Image
            </Button>
          </label>
          <TextField
            autoFocus
            margin="dense"
            id="title"
            label="Title"
            type="text"
            fullWidth
            variant="standard"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="price"
            label="Price"
            type="number"
            fullWidth
            variant="standard"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="description"
            label="Description"
            type="text"
            fullWidth
            variant="standard"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
          <TextField
            autoFocus
            margin="dense"
            id="category"
            label="Category"
            type="text"
            fullWidth
            variant="standard"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
          />
        </DialogContent>

        <DialogActions>
          <Button
            // className={classes.diaButton}
            // onClick={handleClose}
            // type="submit"
            style={{
              textTransform: "none !important",
              color: "#ffc400 !important",
              padding: 14,
              fontWeight: 500,
            }}
            onClick={fileUploadHandler}
          >
            Create
          </Button>
          <Button
            style={{
              textTransform: "none !important",
              color: "#ffc400 !important",
              padding: 14,
              fontWeight: 500,
            }}
            onClick={handleClose}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Answer 1

value={price} 是导致警告的部分。这是因为你的初始 price 状态是 null.

将 price 初始状态更改为空字符串应该可以解决此问题。

const [price, setPrice] = React.useState('');

Answer 2

您将价格初始值设置为 null 并将其用作输入中的值是出现警告的原因。

使用以下任一代码：

const [price, setPrice] = React.useState(); //undefined price

或

const [price, setPrice] = React.useState(""); //empty string as price

警告：“input”上的“value”属性不应为空

Warning: `value` prop on `input` should not be null

reactjs

material-ui