React中reduce函数遍历数组成功后为何触发报错？

你的reduce筛选逻辑本身是可行的，但报错主要来自两个核心问题：

1. 状态类型不匹配 #

你初始化newAnswer为对象{}，但reduce返回的是符合条件的公司数组。当调用setNewAnswer(tempAnswer)把数组存入状态后，后续渲染时访问newAnswer['Symbol']——数组没有该属性，虽然这不会触发handleSubmit里的try/catch，但可能引发渲染错误，你可能混淆了错误来源。

2. 数据存在异常项 #

如果CSV解析后的data中存在没有Name属性的记录，调用company.Name.toLowerCase()会抛出Cannot read properties of undefined (reading 'toLowerCase')错误，直接触发try/catch。遍历过程中前面的正常记录能让dummyAnswer输出结果，但遇到异常记录时就会中断报错。

修复方案 #

方案一：用filter替代reduce（更简洁直观） #

filter本身就是为筛选数组设计的，逻辑和你用reduce实现的完全一致，代码更易读：

export function ParseAndSearch() {
  // 初始化为数组，匹配多条结果的场景
  const [newAnswer, setNewAnswer] = useState([]);

  // 解析CSV文件得到data数组

  const handleSubmit = () => {
    try {
      // 先处理空输入
      if (!userCompany) {
        setNewAnswer([]);
        return;
      }
      const lowerCaseQuery = userCompany.toLowerCase();
      const tempAnswer = data.filter(company => {
        // 先判断Name是否存在，避免访问undefined属性报错
        return company.Name && company.Name.toLowerCase().includes(lowerCaseQuery);
      });

      setNewAnswer(tempAnswer);
    } catch (err) {
      console.error('搜索出错:', err);
    }
  };

  return (
    <div>
      {newAnswer.length === 0 ? (
        <p>未找到匹配的公司</p>
      ) : (
        <ul>
          {newAnswer.map((company, index) => (
            <li key={index}>
              公司名称: {company.Name}，股票代码: {company.Symbol}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

方案二：修复reduce的写法 #

如果坚持要用reduce，只需加上对company.Name的存在判断即可：

const tempAnswer = data.reduce((output, company) => {
  if (company.Name && company.Name.toLowerCase().includes(userCompany.toLowerCase())) {
    output.push(company);
  }
  return output;
}, []);

关键注意点 #

• 状态类型要和存储的数据匹配：用数组存储多条结果，而非对象
• 处理数据异常：访问对象属性前先判断是否存在，避免undefined报错
• 优先用语义化的数组方法（如filter）实现筛选，代码更易维护

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