如何正确显示JSON记录

gijlo24d  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(86)

编码部分工作。
我正在尝试通过reactjs从Atlassian示例获取记录。关于{codes ? JSON.stringify(codes) : 'Loading record'}
我可以得到记录如下

[{"value":{"idx":"100","name":"php"},"key":"mykey"}]

以下是我的问题:当我决定按照下面的代码Map记录时,我在浏览器控制台中看到错误

**TypeError: M is null
    Qd App.js:**


{codes.map(code => (
<div>
<b>{code.value.idx}</b><br/>
<b>{code.value.name}</b><br/>
</div>
    ))}
  {codes.length === 0 && <div>No Record Found</div>}

这是整个代码
App.js

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

function App() {
const [codes, setCodes] = useState(null);

  useEffect(() => {
invoke('mymethod').then(setCodes); 

}, []);

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

      {codes.map(code => (
<div>
<b>{code.value.idx}</b><br/>
<b>{code.value.name}</b><br/>
</div>
    ))}
  {codes.length === 0 && <div>No Record Found</div>}

{codes ? JSON.stringify(codes) : 'Loading record'}

    </div>
  );
}

export default App;

index.js

import Resolver from '@forge/resolver';
import api, { route } from "@forge/api";

const resolver = new Resolver();

resolver.define('mymethod', async (req) => { 
const res = await storage.query().where('key', startsWith('mykey')).limit(20).getMany();

console.log(res);
return res.results;

});


export const handler = resolver.getDefinitions();
igsr9ssn

igsr9ssn1#

const [codes, setCodes] = useState(null);

这里,codes最初是null,所以第一次渲染codes.map()codes.length时会抛出错误。
尝试将状态初始化为空数组.

const [code, setCodes] = useState([]);

使用optional-chaining安全地呼叫.map().length

{codes?.map(code => (
  <div key={code.key}>
    <b>{code.value.idx}</b><br/>
    <b>{code.value.name}</b><br/>
  </div>
))}
{!codes?.length && <div>No Record Found</div>}

我的首选是第一个选项,因为这意味着你不必担心任何地方可能的null值。

相关问题