REACT - 文件上传后自动提交表单以声明包含数组答案

【问题标题】：REACT - auto submit form after files uploaded to state the contains arrayREACT - 文件上传后自动提交表单以声明包含数组
【发布时间】：2022-01-19 09:27:51
【问题描述】：

我想提交一个自动向服务器发送请求的表单。

这就是我将文件加载到状态的方式-

  const onUpload = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();

    const id = event.target.id;
    const fileReader = new FileReader();
    const file = event.target.files![0];

    fileReader.onload = () => {
      setCSVFilesState([...CSVFilesState, { id, file: fileReader.result }]);
    };

    fileReader.readAsDataURL(file);
  };

我正在将 2 个文件上传到 CSVFilesState 的表单中。

我想在两个文件都处于状态时触发请求。如何等待文件然后才发送请求？

这是我的 onSubmit 函数 -

  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();

    backendAPIAxios
      .post("/", CSVFilesState)
      .then((response: AxiosResponse<IServerResponseData>) => {

      })
      .catch((e: AxiosError) => {

      });
  };

试图这样做（没用）-

     const onUpload = (event: ChangeEvent<HTMLInputElement>) => {
        event.preventDefault();
    
        const id = event.target.id;
        const fileReader = new FileReader();
        const file = event.target.files![0];
    
        fileReader.onload = () => {
          setCSVFilesState([...CSVFilesState, { id, file: fileReader.result }]);
        };
    
        fileReader.readAsDataURL(file);

   if (CSVFilesState.length === 1) onSubmit(event);
      };

【问题讨论】：

您可以检查数据的长度。如果 count 等于 2，那么只有您可以进行 API 调用。这将解决您的问题。如果有帮助，请告诉我。
@KrunalShah 我应该把它放在代码的哪里？当我尝试这样做时，使用 CSV.length === 1（数组从 0 开始）。它不等待文件

标签： javascript reactjs typescript axios

【解决方案1】：

useEffect(()=>{
    if(CSVFilesState.length === 2){
        onSubmit()
    }
},[CSVFilesState])

检查了 CSVFilesState 的计数。

【讨论】：

向问题添加代码
length 与数组的索引无关。由于您要检查 2 个文件，因此条件应类似于 CSVFilesState.length===2 而不是 CSVFilesState.length===1
@devedvdevdev 尝试我提供的代码并控制台 if 子句之前的状态