时间戳

首页 > 解决方案 > 如何在反应中正确地迭代或循环对象

reactjs - 如何在反应中正确地迭代或循环对象

问题描述

下面的代码从 Atlassian Storage API 查询记录。

withconsole.log(data) 将记录显示为对象对象。

，我可以在控制台console.log(data.first_name) and console.log(data.last_name)中成功看到Lucy和Carrots的名字。

这是我的问题：

当我尝试遍历其他对象以按照下面的代码显示记录时。它显示错误

TypeError：无法读取 Object.App 未定义的属性“长度”

如果我删除projects.length 并尝试显示记录，它将显示错误

TypeError：无法读取未定义的属性“地图”

以下是我到目前为止的努力

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState, Component, useEffect} from "@forge/ui";

import { storage} from '@forge/api';

 const fetchData = async () => {

//const data = {first_name: 'Lucy', last_name: 'Carrots' };

const data = await storage.get('key1');
console.log(data);
console.log(data.first_name);
console.log(data.last_name);

 };
 
 
const App = () => {
 const [ projects ] = useState(fetchData);
fetchData();

      
  return (
    <Fragment>
     <Text> Display Objects Records</Text>
     
 
         {projects.length ? projects.map((i, v) => (
          <Text key={v}>
            <Text>

<Text>First Name:  {v.first_name}</Text>
<Text>Last Name:  {v.last_name}</Text>
</Text></Text>

        )): <Text>No data stored yet...</Text>}
      

      
  </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);

标签： reactjs

解决方案

我看到响应数据返回一个对象，所以你不需要使用arraywith map。

你应该在useEffect中调用API。

  const App = () => {
    const [projects, setProjects] = useState(null);
    
    useEffect(() => {
      const fetchData = async () => {
        const data = await storage.get("key1");
        setProjects(data);
      };
    
      fetchData();
    }, []);
    ...
    {
      projects ? (
        <Text key={v}>
          <Text>
            <Text>First Name: {projects.first_name}</Text>
            <Text>Last Name: {projects.last_name}</Text>
          </Text>
        </Text>
      ) : (
        <Text>No data stored yet...</Text>
      );
    }
    ...
 }

推荐阅读