如何正确地迭代或循环遍历 React 中的对象
以下代码从 Atlassian Storage API 中查询一条记录。
使用
console.log(data)
将记录显示为对象。
使用
console.log(data.first_name) 和 console.log(data.last_name)
，我可以在控制台中成功看到名称
Lucy
和
Carrots
。
这是我的问题：
当我尝试循环遍历其他对象以按照以下代码显示记录时。它显示错误
TypeError：无法读取 Object.App 中未定义的属性“length”
如果我删除 projects.length 并尝试显示记录，它将显示错误
TypeError：无法读取未定义的属性“map”
以下是我迄今为止的努力
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>
);
我看到响应数据返回一个对象，因此您不需要将
array
与
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>
);
}
...
}
尝试使用
const [projects, setProjects] = useState([])
而不是
const [projects] = useState(fetchData)
。这将使您的状态一开始是一个空数组，API 调用稍后可以使用
setProjects()
将其交换为已填充的数组。
然后，在
fetchProjects
中，您可以调用
setProjects(data)
来更新您的状态，这将重新呈现您的页面。
最后，在您现在的位置调用
fetchData()
将导致每次呈现您的应用时都调用它，这是低效的。
相反，在
useEffect()
钩子中调用它：
useEffect(fetchData, []);
这将在页面加载时调用一次
fetchData()
。