React项目报错Type error: cannot read properties of undefined (reading 'map')求解

项目代码 #

import React, { useState } from "react";
import Papa from "papaparse";

function App() {
  const [file, setFile] = useState();
  const [array, setArray] = useState([]);
  const [predictions, setPredictions] = useState([]);

  const fileReader = new FileReader();

  const handleOnChange = (e) => {
    setFile(e.target.files[0]);
     Papa.parse(e.target.files[0], {
     header: true,
     skipEmptyLines: true,
     complete: function (results) {
       console.log(results.data)
     },
   });    
  };
            
  const csvFileToArray = (string) => {
    Papa.parse(string, {
      header: true,
      skipEmptyLines: true,
      complete: function (results) {
        if (Array.isArray(results.data)) {
          const parsedArray = results.data.map((row) => {
            const obj = {};
            for (let key in row) {
              obj[key.trim()] = row[key].trim();
            }
            return obj;
          });
          setArray(parsedArray);
        } else {
          console.error('Error parsing CSV data.');
        }
      },  
    });
  };
  
  const handleOnSubmit = (e) => {
    e.preventDefault();

    if (file) {
      fileReader.onload = function (event) {
        const text = event.target.result;
        csvFileToArray(text);
      };

      fileReader.readAsText(file); 
    }
  };

const handlePredict = async (event) => {
        console.log('array',array) 
        event.preventDefault()
        try { 
          const response = await fetch('/multi_airpredict', {                                                                                             
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(array),
          });

          if (!response.ok) {
            throw new Error('Prediction failed');
          }

          const data = await response.json();
          setPredictions(data.predictions);
        } catch (error) {
          console.log(error);
        } 
      };

  const headerKeys = Object.keys(Object.assign({}, ...array));

  return (
    <div style={{ textAlign: 'center' }}>    
      <h1>CSV IMPORT</h1> 
      <form>
        <input
          type="file"
          id="csvFileInput"
          accept=".csv"
          onChange={handleOnChange}
        />

        <button onClick={handleOnSubmit}>IMPORT CSV</button>

        <button onClick={handlePredict}>PREDICT</button>
      </form>

      <br />

      <table>
        <thead>
          <tr key="header">
            {headerKeys.map((key) => (
              <th key={key}>{key}</th>
            ))}
          </tr>
        </thead>

       <tbody>
          {array.map((item, index) => (
            <tr key={index}>
              {Object.values(item).map((val, index) => (
                <td key={index}>{val}</td>
              ))}
            </tr>  
          ))}
        </tbody> 
              </table>

              
      <div>
        <h2>Predictions</h2>
        <ul>
          {predictions.map((prediction, index) => (
            <li key={index}>{prediction}</li>
          ))}
          </ul>
      </div>
    </div>
  );
}

export default App; 

问题描述 #

这是一个读取CSV文件、转换为数组后传入预测模型批量生成每行预测结果的项目。目前仍在开发可接收完整CSV输入的Flask API，推测报错Type error: cannot read properties of undefined (reading 'map')是因为暂无预测值，请求协助解决该问题。

报错原因分析 #

报错核心是某个需要调用map的变量被设置为undefined而非数组：

• 最可能的触发点是API返回数据中无predictions字段，或请求失败时，setPredictions意外将predictions设为undefined，导致渲染时调用map报错。
• 其次是表头生成逻辑headerKeys，当array包含无效项（如null/undefined）时，可能引发异常。

修复方案 #

1. 确保predictions始终为数组类型 #

在handlePredict中更新setPredictions时，增加可选链和默认值兜底，无论API返回结果如何，都保证predictions是数组：

setPredictions(data?.predictions || []);

2. 渲染预测结果时增加空值判断 #

在调用map前先确保变量有效，避免直接调用报错：

<ul>
  {(predictions || []).map((prediction, index) => (
    <li key={index}>{prediction}</li>
  ))}
</ul>

3. 错误处理时重置predictions #

在catch块中将predictions重置为空数组，避免错误状态下残留异常值：

catch (error) {
  console.log(error);
  setPredictions([]);
}

4. 优化表头生成逻辑 #

当array为空时直接返回空数组，避免Object.assign处理空数组的潜在问题：

const headerKeys = array.length > 0 ? Object.keys(Object.assign({}, ...array)) : [];

内容的提问来源于stack exchange，提问作者VC_44