我一直在尝试将文件上传到 api，但收到此错误“对象作为 React 子项无效，请改用数组”

Question

我一直在尝试向我的 api 提交文件，但我得到了这个 Objects are not valid as a React child 。如果您打算渲染子集合，请改用数组。下面是我提交数据的代码

   

    const handleSubmit = async () => {
        try {
          const resumeData = selectedResume?.id ? { resumeId: selectedResume.id } : { resumeFile: selectedResume };
    
          const values = questions?.map((question) => ({
            id: question?.id,
            answer: answers[`question${question?.id}`],
          }));
    
          const data = {
            jobId: job?.id,
            resumeType: 'internal',
            ...resumeData,
            values,
          };
          console.log('data sent to api', data);
          const response = await axios.post(`/api/v1/jobs/stu/apply/`, data);
          console.log(response.data);
          enqueueSnackbar(response.data.message);
          onClose();
          window.location.reload();
        } catch (error) {
          console.log(error);
        }
      }; 

下面是我提交这份简历的代码

const ResumeStep = ({ onNext, onCancel }) => {
  const [resumeList, setResumeList] = useState([]);
  const [selectedResume, setSelectedResume] = useState('');
  const [selectedFile, setSelectedFile] = useState(null);


  useEffect(() => {
    fetchResume();
  }, []);

  const fetchResume = async () => {
    try {
      const res = await axios.get('/api/v1/jobs/stu/resumes/');
      setResumeList(res.data);
    } catch (error) {
      console.error('Error fetching resumes:', error);
    }
  };

  const handleResumeChange = (event) => {
    setSelectedResume(event.target.value);
  };

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  
  const handleRemove = () => {
    setSelectedFile(null);
  };

  const handleSubmit = () => {
    if (selectedFile) {
      onNext(selectedFile);
    } else {
      onNext(selectedResume);
    }
  };

  return (
    <>
      <DialogTitle>Submit Resume</DialogTitle>
      <FormControl fullWidth sx={{ padding: '20px' }}>
        <FormControl fullWidth sx={{ marginBottom: '20px' }}>
          <InputLabel>Select a resume</InputLabel>
          <Select value={selectedResume} onChange={handleResumeChange} label="Select a resume">
            {resumeList.map((resume) => (
              <MenuItem key={resume.id} value={resume}>
                {resume.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <Divider sx={{ marginBottom: '10px' }} />
        <FormControl fullWidth sx={{ padding: '20px' }}>
          
          <InputLabel>Upload a resume file</InputLabel>
          
          <Input
            type="file"
            onChange={handleFileChange}
            inputProps={{ accept: '.pdf,.doc,.docx' }}
          />
          {selectedFile && selectedFile.name && (
            <Typography variant="body1" sx={{ mt: 1, fontWeight: 'bold', color: 'text.primary' }}>
              {selectedFile.name}
            </Typography>
          )}
        </FormControl>
      </FormControl>
      <DialogActions>
        <Button onClick={onCancel} color="grey" variant="contained">
          Cancel
        </Button>
        <Button onClick={handleSubmit} color="primary" variant="contained">
          Next
        </Button>
      </DialogActions>
    </>
  );
}

我已按照建议尝试了其他方法，但无法解决问题

我正在尝试将数据提交到我的API，因为我通过从下拉列表中选择简历来执行此操作，但没有显示此类错误，这也是因为在这种情况下我只是传递resumeId，但每当上传文件时都会显示此错误

Answer 1

检查

res.data

功能中的

fetchResume

。可能是

object

，而不是

array