React.js调用Atlassian实例数据时map遍历报错问题排查

错误原因 #

组件首次渲染时，codes的初始状态是null，直接调用codes.map()会触发错误——因为null不是数组，没有map方法；同理codes.length === 0的判断也会因为null没有length属性报错。

修复方案 #

方案1：将初始状态设为空数组（推荐）

修改App.js中的状态初始化，把null换成空数组，同时新增加载状态区分加载中、无数据、有数据三种场景：

import React, { useEffect, useState } from "react";

function App() {
  // 初始设为空数组，避免首次渲染报错
  const [codes, setCodes] = useState([]);
  // 新增加载状态，区分加载中与无数据状态
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    invoke('mymethod')
      .then(data => {
        setCodes(data);
        setLoading(false);
      })
      .catch(err => {
        setLoading(false);
        console.error('数据获取失败:', err);
      });
  }, []);

  return (
    <div>
      <h2> Display Codes Data</h2>

      {loading ? 'Loading record' : (
        <>
          {/* 遍历数据，注意添加唯一key */}
          {codes.map(code => (
            <div key={code.key}>
              <b>{code.value.idx}</b><br/>
              <b>{code.value.name}</b><br/>
            </div>
          ))}
          {/* 无数据提示 */}
          {codes.length === 0 && <div>No Record Found</div>}
          {/* 显示原始数据 */}
          {JSON.stringify(codes)}
        </>
      )}
    </div>
  );
}

export default App;

方案2：保留初始null状态，添加前置判断

如果不想修改初始状态，就在遍历和长度判断前先检查codes是否存在：

// 修改App.js中的渲染部分
return (
  <div>
    <h2> Display Codes Data</h2>

    {/* 先判断codes存在再遍历 */}
    {codes && codes.map(code => (
      <div key={code.key}>
        <b>{code.value.idx}</b><br/>
        <b>{code.value.name}</b><br/>
      </div>
    ))}
    {/* 同样先判断codes存在再检查长度 */}
    {codes && codes.length === 0 && <div>No Record Found</div>}

    {codes ? JSON.stringify(codes) : 'Loading record'}
  </div>
);

额外注意点 #

• React列表渲染必须添加唯一key，这里用每个数据项的code.key作为key，符合React的性能优化要求。
• 建议添加错误捕获逻辑，避免异步请求失败时页面无响应。

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