React.js从Atlassian实例获取对象数据并正确渲染的问题

数据老陈

2026-7-8

问题分析与解决

错误根源

初始状态下data被设为null，在异步请求invoke('getdata-creator_name')完成前，data始终是null。此时JSON.stringify(data)的结果是"null"，而非你判断的"{}"，这会触发非空分支的渲染逻辑，尝试访问data.creator_name时自然会抛出TypeError: d is null的错误。

修复方案

方案1：初始化空对象替代null

把useState的初始值从null改成{}，这样初始时JSON.stringify(data)就是"{}"，不会提前进入非空分支：

const [data, setData] = useState({});

方案2：增加null与空对象双重判断

在渲染前先判断data是否为null，再判断对象是否为空，结合可选链操作符避免报错：

// 空状态判断
{(!data || Object.keys(data).length === 0) && 'Record is empty'}

// 非空渲染逻辑
{data && Object.keys(data).length > 0 && (
  <>
    <span> Welcome {data.creator_name}</span>
    <input type='text' value={data.creator_name} />
  </>
)}

方案3：用可选链简化判断

如果不想修改初始状态，直接用可选链操作符处理null情况：

{data?.creator_name ? (
  <>
    <span> Welcome {data.creator_name}</span>
    <input type='text' value={data.creator_name} />
  </>
) : 'Record is empty'}

完整修复后的App.js示例

import React, { useEffect, useState } from "react";
// 注意：需确保已导入invoke
import { invoke } from '@forge/bridge';

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    invoke('getdata-creator_name').then(setData);
  }, []);

  return (
    <div>
      <h2> Display Records creators name</h2>
      
      {Object.keys(data).length === 0 && 'Record is empty'}
      
      {Object.keys(data).length > 0 && (
        <>
          <span> Welcome {data.creator_name}</span>
          <input type='text' value={data.creator_name} />
        </>
      )}
    </div>
  );
}

export default App;