Блог

Всем добрый день, я пытаюсь создать функцию загрузки фотографий с помощью крючков react, которая взаимодействует с API. Всякий раз, когда я пытался нажать «Отправить» после выбора фотографии, она выдает ошибку «Преобразование круговой структуры в JSON».

Это то, что я сделал до публикации этого:

1. Я искал ошибку в Google и, основываясь на результатах поиска, обнаружил, что ошибка, вызванная JSON.stringify.
2. Я проверил ошибку с помощью console.log. Если я правильно понял, axios.post несет ответственность за выдачу ошибки. Из-за этого я предположил, что причиной ошибки является отправка действия, поэтому я попытался удалить его. После этого он начал выдавать эту ошибку -gt; Ошибка типа: Не удается прочитать свойства, не определенные (чтение «типа»), и это выбрасывается промежуточным программным обеспечением.

Вы можете указать мне правильное направление?

Это фрагмент кода, который я написал: Форма:

 import { useDispatch } from 'react-redux'; import { addActivity } from '../actions/activityAction';  //...  export default function FormDialog({ open, handleClose, jobId = '' }) {   const [description, setDescription] = useState('');  const dispatch = useDispatch();   const handleSubmit = () =gt; {  const ext = fileExt.substring(fileExt.indexOf('.'),fileExt.length);  const file = `${preview}${ext}`;    dispatch(addActivity({ description, file, jobId }))  };   return (  lt;divgt;  lt;Dialog open={open} onClose={handleClose}gt;  lt;DialogTitlegt;Subscribelt;/DialogTitlegt;  lt;DialogContentgt;  lt;DialogContentTextgt;   lt;/DialogContentTextgt;  lt;TextField  autoFocus  margin="dense"  id="name"  label="Description"  type="text"  fullWidth  variant="standard"  onChange={setDescription}  /gt;  lt;div id="img-upload"gt;    lt;div id='preview'gt;  { preview !== '' ? lt;img src={`${preview}`} width='100vw' height='100vh'/gt; : null}  lt;/divgt;  lt;div id='content'gt;  lt;input  type="file"  id="fileInput"  alt="Click to upload image"  src="/assets/images"  multiple  onChange={handleOnChange}  /gt;  lt;/divgt;   lt;/divgt;  lt;TextField  autoFocus  margin="dense"  id="name"  label="Job Id"  type="number"  fullWidth  variant="standard"  value={jobId}  disabled  /gt;  lt;/DialogContentgt;  lt;DialogActionsgt;  lt;Button onClick={handleClose}gt;Cancellt;/Buttongt;  lt;Button onClick={handleSubmit}gt;Submitlt;/Buttongt;  lt;/DialogActionsgt;  lt;/Dialoggt;  lt;/divgt;  );  }  

Создатель действий:

 export const addActivity = (activity) =gt; async dispatch =gt; {   const token = localStorage.getItem('token');  const config = { headers: { Authorization: `Bearer ${token}` } };   try {  Api.post(`/activity`, activity, config)  .then(res =gt; {    console.log(res)  dispatch({  type: actions.ADD_ACTIVITY_STARTED,  });  if (res.data) {  dispatch({  type: actions.ADD_ACTIVITY,  payload: res.data,  });  }    })  } catch (error) {  console.log(error.message)  }  }  

Это скриншот ошибки:

Спасибо, что уделили мне время.