将Axios响应设置为状态。错误：重新渲染过多。React限制渲染的数量以防止无限循环

Question

我想建立一个组件

1. 使用Axios将文件上传到API。
2. 响应被存储并传递到另一个组件。

但使用下面的代码，我得到了太多的错误重新渲染和错误突出显示

setData({ completeData: res.data })

组件的完整代码如下所示。我是一个比较新的反应者，3天多来一直在试图找出这个错误的根本原因，但没有任何帮助。我不知道我哪里出错了。

const UploadChat = () => {
  const [data, setData] = useState({
    selectedFile: "Hi",
    completeData: null,
  })


  const fileUpload = (e) => {
    e.preventDefault()
    let file = e.target.files[0]
    setData({
      selectedFile: file,
    })
  }

  const submitChat = async (e) => {
    e.preventDefault()
    let postData = new FormData()
    postData.append("file", data.selectedFile)
    try {
      const res = await axios.post("http://127.0.0.1:4555/upload", postData)
      setData({ completeData: res.data })
    } catch (err) {
      console.log(err)
    }
  }

  return (
    <div>
      <form onSubmit={(e) => submitChat(e)}>
        <input type="file" name="myfile" onChange={(e) => fileUpload(e)} />
        <input type="submit" name="submit" />
      </form>
      {data.completeData ? (
        <Redirect to={{ pathname: "/dashboard", state: data.completeData }} />
      ) : (
        <h1>Not</h1>
      )}
    </div>
  )
}

Answer 1

不用想太多，它是否与

setData((prevData) => ({ ...prevData, completeData: res.data }))

?