UseState не работает внутри useMutation mutate, во время загрузки изображения cloudflare

Я такой новичок в программировании.

Начните создавать сайт с помощью этих вещей

• Django : backend

• React.JS-TypeScript : Frontend

• Chakra-UI : CSS

В то время как я создаю свой сайт, я хочу использовать "cloudflare" в качестве источника изображения. И сделал страницу запроса ниже.

root/src/api.tsx

export interface IUploadQuestionVariables {
  pk: string;
  title: string;
  contents: string;
  tags: number[];
  terms: number[];
  photos: FileList;
}

export const uploadQuestion = (variables: IUploadQuestionVariables) =>
  instance
    .post(`questions/`, variables, {
      headers: {
        "X-CSRFToken": Cookie.get("csrftoken") || "",
      },
    })
    .then((response) => response.data);

export const getUploadURL = () =>
  instance
    .post(`medias/photos/get-url`, null, {
      headers: {
        "X-CSRFToken": Cookie.get("csrftoken") || "",
      },
    })
    .then((response) => response.data);

export interface IUploadImageVariables {
  file: FileList;
  uploadURL: string;
}

export const uploadImage = ({ file, uploadURL }: IUploadImageVariables) => {
  const form = new FormData();
  form.append("file", file[0]);
  return axios
    .post(uploadURL, form, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((response) => response.data);
};

export interface ICreatePhotoVariables {
  questionPk: string;
  file: string;
}

export const createPhoto = ({ questionPk, file }: ICreatePhotoVariables) =>
  instance
    .post(
      `questions/${questionPk}/photos`,
      { file },
      {
        headers: {
          "X-CSRFToken": Cookie.get("csrftoken") || "",
        },
      }
    )
    .then((response) => response.data);

root/src/route/QuestionUpload.tsx

НО!!! мой код не работает хорошо.

root/src/route/QuestionUpload

  const [questionPk, setQuestionPk] = useState("");

      console.log(data.id);   ==> WORK
      console.log(typeof data.id);   ==> WORK : shows number
      console.log(data.id.toString());     ==> WORK : some str data
      setQuestionPk(data.id.toString());     ==> NOT WORK
      console.log(questionPk);    ==> shows initial useState Data which is ""

Сделано новое сообщение, но без фотоданных.

поскольку фотография уходит в никуда.

Я хочу, чтобы "setQuestionPk" работал и изменял данные вопросаPk!

Есть ли кто-нибудь, кто может мне помочь...?

когда начальными данными useState является некоторая строка типа "80" => то загрузка фото работает и показывает фото на "127.0.0.1:3000/questions/80" корректно.

Я надеюсь, что мой setQuestionPk будет работать и надеюсь, что фотографии будут загружаться в новый вопрос.

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