React: useState配列への要素の追加について

Question

前提・実現したいこと

Reactでappを作成しており，backend（Python flask）にデータを送りたいと思っています。
以下の様な複数シートを含んだExcelデータを，React DropZoneを用いて読み込み，React内部でExcelをJsonに変換して，axiosでbackendにデータを送っております。

Sheet1:

A	B	C
小林	199	79
石川	150	30

Sheet2

A	B	C
上田	172	70
原田	168	65

Sheet3

A	B	C
松本	172	62
石川	187	75

最終的には，Python側で受け取りとり，DataFrameに変換したいと考えています。

発生している問題・エラーメッセージ

以下，Python側で受け取ったデータですが，DataFrameに変換しても意図した形で取得できていません。

	file
0	[[[], [{'label': 'Sheet1', 'key': '[{"A":"小林","B":199,"C":79},{"A":"石川","B":150,"C":30}]'}]], [{'label': 'Sheet2', 'key': '[{"A":"上田","B":172,"C":70},{"A":"原田","B":168,"C":65}]'}]]
1	[{'label': 'Sheet3', 'key': '[{"A":"松本","B":172,"C":62},{"A":"石川","B":187,"C":75}]'}]

該当のソースコード

  const [impFile, setFile] = useState([]);

  const xlsxFileToJson = (file) => {
    var reader = new FileReader();
    console.log('-----Excel drop-----')
    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });
      workbook.SheetNames.forEach(function(sheetName) {

        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        
        const newDF = json_object;
        const result = Object.keys(newDF[0]).map(x=>({label:sheetName, key:json_object}));
        setFile((...impFile)=>[...impFile, result]);
      })
    };
    
  ...
         
  };

axios post箇所

Axios.post('http://127.0.0.1:5000/excel', {file: impFile})

Python側では以下の様な形で受け取っています。

 impFile = request.get_json()
 tmpDF = pd.DataFrame(impFile)

試したこと

問題の原因としては，
①JaveScript側での配列への格納方法が適切でない。
②Python側での処理（要素抽出）が正しくない。
と思っているのですが，対応方法が分かりません。

ご教示頂けますと幸いです。

Answer 1

setFile に渡す関数の引数が ...impFile だと、引数 (たとえ一つでも) をまとめて配列として受け取ることになるからでしょう。
参考: 【JavaScript】残余引数(Rest parameters)とは？使い方やメリットをまとめてみた

-        setFile((...impFile)=>[...impFile, result]);
+        setFile(impFile => [...impFile, result]);

Comments

[caveatld]

ご回答誠にありがとうございました！！
意図した通りの動作となりました。