Предупреждение: свойство `value` на `input` не должно быть нулевым.

У меня есть этот файл, и через этот файл я кодирую диалоговое окно и создаю продукт, потому что проект является проектом электронной коммерции, и в этом диалоговом окне я загружаю изображение, и я получил эту ошибку, и я не знал, как ее решить :

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>
  );
}
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
15
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

value={price} — это та часть, которая вызывает предупреждение. Это потому, что ваше начальное price состояние null.

Изменение начального состояния price на пустую строку должно решить проблему.

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

Вы устанавливаете начальное значение цены как нулевое, и использование его в качестве значения на входе является причиной предупреждения.

Используйте один из следующих кодов:

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

ИЛИ

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

Другие вопросы по теме