我如何读取多个文件并将它们添加到数组状态以做出反应？

Question

我正在尝试读取前端用户上传的多个文件，并将它们添加到处于我的状态的数组中，但是我一直收到相同的错误“期望分配或函数调用，而是看到一个表达式no-unused-表达式”

我试图循环读取每个文件，并将其推到状态数组的末尾。 console.log(file);正确显示了文件。

这是我的代码：

                <Dropzone
                  multiple={true}
                  onDrop={function(acceptedFiles) {
                    for (var i = 0; i < acceptedFiles.length; i++) {
                      var file = acceptedFiles[i];
                      console.log(file);
                      async ([file]) => {
                        let reader = new FileReader();
                        reader.onload = e => {
                          const contents = e.target.result;
                          this.setState({
                            //i dont know if this will work
                            Files: [...this.state.Files, contents]
                          });
                          console.log(this.state.Files);
                        };
                        reader.readAsDataURL(file);
                      };
                    }
                  }}
                >
                  {({ getRootProps, getInputProps }) => (
                    <section>
                      <div {...getRootProps()}>
                        <input {...getInputProps()} />
                        <p>
                          Drag items or click here to upload.
                        </p>
                      </div>
                    </section>
                  )}
                </Dropzone>

我没有填充数组状态，而是收到“预期的分配或函数调用，而是看到一个表达式no-unused-expressions”，但我认为我无法从代码中删除异步函数。 （如果我将其删除，则会收到TypeError：无法读取未定义的属性“ setState”）