Почему состояние обратного вызова setState превращается в "undefined" после заполнения данными?

Я пытаюсь создать продукт с изображением из браузера. Для поля изображения у меня есть отдельный компонент для обрезки изображения.

       // pass setImage as callback to child FileLoader component
       const [image, setImage] = useState("");

       
       // part of createProduct form.
       // this is a separete component. i passed callback to the set the image url
      <FileLoader onFileUpload={setImage}></FileLoader>
      
      <Form.Group controlId="brand">
        <Form.Label>Brand</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter brand"
          value={brand}
          onChange={(e) => setBrand(e.target.value)}
        ></Form.Control>
      </Form.Group>

Моя цель - установить изображение, загрузить его сначала в Django, Django вернет url для ведра S3, я буду использовать этот url для передачи форме createProduct. внутри компонента FileLoader вот как я посылаю запрос post:

 const uploadFileHandler = async (image: File) => {
    const formData = new FormData();
    formData.append("image", image);
    const config = {
      headers: {
        "Content-Type": "multipart/form-data",
        Authorization: `Bearer ${userInfo?.token}`,
      },};
    return axios
      .post(
        `${process.env.DJANGO_API_URL!}/api/products/upload-image/`,
        formData,
        config )
       // onFileUpload is callback to set the image in parent component
      .then((res) => onFileUpload(res.data));
  };

Это действительно работает. Я получаю url, но как только я его получаю, он становится undefined. В чем может быть причина? Я также зарегистрировал "имя" продукта, и это состояние все еще сохраняется и также отправляется в бэкенд, когда я отправляю форму

Вернуться на верх